Author: remediosaraya@gmail.com

8 Things all Designers must Learn

As the web standards continue to increase, new technologies and techniques arise, which increases clientele expectations for what a designer can bring forth. Whether be it fancy gradient effects, attention to detail, or mesmerizing illustrations, there is always that expectation a client wants for what they envision for their design. Furthermore, we discuss eight things

Read more

Pure CSS3 Checkboxes

link to playground

Elegantly developed CSS3 checkboxes that requires no JavaScript. HTML

HTML

<h1 class=”title”>Pure CSS Custom Checkboxes</h1>
<ul class=”unstyled centered”>
<li><input id=”styled-checkbox-1″ class=”styled-checkbox” type=”checkbox” value=”value1″ />
<label for=”styled-checkbox-1″>Checkbox</label></li>
<li><input id=”styled-checkbox-2″ class=”styled-checkbox” checked=”checked” type=”checkbox” value=”value2″ />
<label for=”styled-checkbox-2″>CSS Only</label></li>
<li><input id=”styled-checkbox-3″ class=”styled-checkbox” disabled=”disabled” type=”checkbox” value=”value3″ />
<label for=”styled-checkbox-3″>A disabled checkbox</label></li>
<li><input id=”styled-checkbox-4″ class=”styled-checkbox” type=”checkbox” value=”value4″ />
<label for=”styled-checkbox-4″>Fourth option</label></li>
</ul>

CSS

.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it</code>

&amp; + label {
position: relative;
cursor: pointer;
padding: 0;
}

// Box.
&amp; + label:before {
content: ”;
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
background: white;
}

// Box hover
&amp;:hover + label:before {
background: #f35429;
}

// Box focus
&amp;:focus + label:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

// Box checked
&amp;:checked + label:before {
background: #f35429;
}

// Disabled state label.
&amp;:disabled + label {
color: #b8b8b8;
cursor: auto;
}

// Disabled box.
&amp;:disabled + label:before {
box-shadow: none;
background: #ddd;
}

// Checkmark. Could be replaced with an image
&amp;:checked + label:after {
content: ”;
position: absolute;
left: 5px;
top: 9px;
background: white;
width: 2px;
height: 2px;
box-shadow:
2px 0 0 white,
4px 0 0 white,
4px -2px 0 white,
4px -4px 0 white,
4px -6px 0 white,
4px -8px 0 white;
transform: rotate(45deg);
}
}

// Demo-only styles
// ————–

html {
background: lightgray;
}

body {
font-family: ‘Source Sans Pro’, sans-serif;
}

.unstyled {
margin: 0;
padding: 0;
list-style-type: none;
}

li {
margin: 20px 0;
}

.centered {
width: 300px;
margin: auto;
}

.title {
text-align: center;
color: rgb(69, 113, 236);
}