A new project ist online! My OSM-Categories WordPress Plugin was used.
http://www.geschichte-vor-ort.org
New Project: geschichte-vor-ort.org
Reply
Tag Archives: CSS3
CSSOff final placement: 34th
OK, this is my first post after months and it’s not the latest news, but still important for me. After waiting a long time i got my scores and feedback from UnmatchedStyle CSSOff 2012.
To put it in a nutshell: Final Score: 68.67pts | Final Placement: 34th
Loving all the custom hover animations in here. Topbar, logo, title, obstacles and prizes all have very fun transitions. Form could use some validation, select input display could be customized more, and I wish the timer did something besides loop. Overall, pretty solid entry.
Yeah! What a surprise! You can watch my result here: http://dl.dropbox.com/u/4799476/CSSOFF-GH/index.html and, if you want, the winners here: CSSOff Winners 2012
CSS3 badges using UTF-8 character
The idea was to generate badges for different types of users on the fly. Just by defining a new color. The solution is using an UTF-8 character for the corner: ◤ U+25E4
You can see the example page here:
CSS3-badges
1. Step: Use UTF-8
<meta charset="utf-8">
2. Step: The badge style
.badge {
font-family: Arial,san-serif;
font-size: 10px;
line-height: 1em;
padding: 0px 15px 0px 3px;
text-transform: uppercase;
border: 1px solid #ccc;
color: #666666;
position: relative;
background: #f1f1f1;
}
.badge:before {
content: '\25E4';
width: 12px;
height: 12px;
display: block;
background: #fff;
position: absolute;
right: -1px;
bottom: -1px;
font-size: 15px;
line-height: 10px;
color: #bdbdbd;
}
.badge:hover {
color: #2D3441;
cursor: pointer;
}
3. Step: The badge markup
<span class="badge" title="Default Badge">Default Badge</span>
Icon CSS with SASS
If you want icons for buttons, links, info text or something else on your website the best way is to use an icon sprite as background image. So just one image for all is needed. But sometimes it’s a mess to handle all the different pixel positions. Lets get SASS do the work.
1. Step: The icon sprite
Important for the sprite are the grid and the alignment of every single icon. At this example the grid is 20x20px.
2. Step: Get the right icon position
To get the position of every icon a SASS function is used.
@function get_icn_bg_pos ($pos-x: 0, $state: default) {
$pos-y: 0;
$raster-x: 20;
$raster-y: 20;
@if $state == default {
$pos-y: 0;
} @else if $state == link {
$pos-y: 0;
} @else if $state == visited {
$pos-y: 0;
} @else if $state == focus {
$pos-y: 1;
} @else if $state == hover {
$pos-y: 1;
} @else if $state == active {
$pos-y: 2;
} @else if $state == current {
$pos-y: 2;
} @else if $state == primary {
$pos-y: 2;
}
@return (-$raster-x * $pos-x) + px (-$raster-y * $pos-y) + px;
}
This function returns the pixel for the background position dependent on the icon position in the sprite and the state of the element (link for example). Possible states are link, visited, focus, hover, active and current for links and default and primary for non active elements. The grid is defined in the function. With icon position and grid it’s easy to calculate the top / left pixel position.
3. Step: The main CSS
Just two classes for icons before or after the element content.
.icn_before:before, .icn_after:after {
content: '';
height: 20px;
width: 20px;
display: inline-block;
vertical-align: middle;
background: url('images/icon_sprite.png') no-repeat;
}
4. Step: Generate the single icon CSS
At first a list of all icons in the right order:
$icons: like, comments, love, message;
Finally just a little loop to generate the CSS for all states:
$i: 0;
@each $type in $icons {
.icn_before.#{$type}:before, .icn_after.#{$type}:after {
background-position: get_icn_bg_pos($i);
}
a.icn_before.#{$type}:link:before, a.icn_after.#{$type}:link:after {
background-position: get_icn_bg_pos($i, link);
}
a.icn_before.#{$type}:visited:before, a.icn_after.#{$type}:visited:after {
background-position: get_icn_bg_pos($i, hover);
}
a.icn_before.#{$type}:focus:before, a.icn_after.#{$type}:focus:after {
background-position: get_icn_bg_pos($i, focus);
}
a.icn_before.#{$type}:hover:before, a.icn_after.#{$type}:hover:after {
background-position: get_icn_bg_pos($i, hover);
}
a.icn_before.#{$type}:active:before, a.icn_after.#{$type}:active:after {
background-position: get_icn_bg_pos($i, active);
}
.current.icn_before.#{$type}:before, .current.icn_after.#{$type}:after {
background-position: get_icn_bg_pos($i, current);
}
.primary.icn_before.#{$type}:before, .primary.icn_after.#{$type}:after {
background-position: get_icn_bg_pos($i, primary);
}
$i: $i + 1;
}
$i is the position of the icon in the list as a number.
5. Step: The HTML markup
<span class="icn_before message primary">100</span>
Now, if a new icon is needed, just replace the icon sprite and change the $icons list.
That’s all!
Again thanx to Kosmar for brainstorming.
CSS3 Textbuttons
For this kind of buttons no images are needed. It’s just CSS3 and text. All icons are taken from the UTF-8 encoding table. This provides the facility to change the icon color and size just with CSS font settings.
You can see the example page here:
CSS3_textbuttons.html
1. Step: Use UTF-8
<meta charset="utf-8">
2. Step: The button style
.button {
display: inline-block;
text-decoration: none;
color: #fff;
line-height: 1.5em;
height: 1.5em;
border-radius: .75em;
border: 1px solid #666;
padding: 0 .5em;
margin: 0 10px 10px 0;
background: #7abcff;
background: -moz-linear-gradient(top, hsla(210,100%,74%,1) 0%, hsla(210,91%,67%,1) 44%, hsla(210,84%,59%,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(210,100%,74%,1)), color-stop(44%,hsla(210,91%,67%,1)), color-stop(100%,hsla(210,84%,59%,1)));
background: -webkit-linear-gradient(top, hsla(210,100%,74%,1) 0%,hsla(210,91%,67%,1) 44%,hsla(210,84%,59%,1) 100%);
background: -o-linear-gradient(top, hsla(210,100%,74%,1) 0%,hsla(210,91%,67%,1) 44%,hsla(210,84%,59%,1) 100%);
background: -ms-linear-gradient(top, hsla(210,100%,74%,1) 0%,hsla(210,91%,67%,1) 44%,hsla(210,84%,59%,1) 100%);
background: linear-gradient(top, hsla(210,100%,74%,1) 0%,hsla(210,91%,67%,1) 44%,hsla(210,84%,59%,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 );
text-shadow: 1px 1px 1px #666;
box-shadow: 1px 1px 2px #666;
}
.button:hover {
color: #eee;
text-shadow: none;
}
.button:active, .button.current {
color: #eee;
text-shadow: none;
box-shadow: none;
-moz-box-shadow: none;
background: #4096ee;
background: -moz-linear-gradient(top, hsla(210,84%,59%,1) 0%, hsla(210,91%,67%,1) 56%, hsla(210,100%,74%,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(210,84%,59%,1)), color-stop(56%,hsla(210,91%,67%,1)), color-stop(100%,hsla(210,100%,74%,1)));
background: -webkit-linear-gradient(top, hsla(210,84%,59%,1) 0%,hsla(210,91%,67%,1) 56%,hsla(210,100%,74%,1) 100%);
background: -o-linear-gradient(top, hsla(210,84%,59%,1) 0%,hsla(210,91%,67%,1) 56%,hsla(210,100%,74%,1) 100%);
background: -ms-linear-gradient(top, hsla(210,84%,59%,1) 0%,hsla(210,91%,67%,1) 56%,hsla(210,100%,74%,1) 100%);
background: linear-gradient(top, hsla(210,84%,59%,1) 0%,hsla(210,91%,67%,1) 56%,hsla(210,100%,74%,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#7abcff',GradientType=0 );
}
For the gradient style the http://www.colorzilla.com/gradient-editor/ was used again.
3. Step: Add the icon
.button:before, .button:after {
font-size: 1.125em;
}
.button:before {
margin-right: 5px;
}
.button:after {
margin-left: 5px;
}
.button.email:before {
content: "\2709";
}
The :before or :after pseudo element is used to place the icon inside the button. The font-size makes it a little bit bigger and the margin seperates it from the other text. At last the content with the HEX code of the UTF-8 character is needed. Notice, that the HTML 4.0 character entities or the numerical HTML encoding of the Unicode character dosn’t work.
4. Step: The button markup
<a href="#" class="button email">Email</a>