Search This Blog

Saturday 24 November 2012

Web Symbols typeface & CSS3

Web Symbols typeface is a font library that collects "all frequently used iconographics and symbols" in website developing.




It's vector based and html compliant so is a faster and more flexible alternative to graphic icons.



Just download the archive from Web Symbols site and add the font to your CSS file with those lines of code:

@font-face{ 
 font-family: 'WebSymbolsRegular';
 src: url('/fonts/websymbols-regular-webfont.eot');
 src: url('/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
      url('/fonts/websymbols-regular-webfont.woff') format('woff'),
      url('/fonts/websymbols-regular-webfont.ttf') format('truetype'),
      url('/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
 }

Then just assign the font to CLASSES and IDs you want to show as symbols:
.my-icons {font-family: 'WebSymbolsRegular';}

You can find icons for:

  • Content management systems
  • Gallery navigation icons
  • Social networks
  • Icons for service sites




Web Symbols  is under OFL Licence, so you can use it for free.

Is great the ability to combine  Web Symbols with CSS3 effects  to rotate, translate or scale icons like in this page: www.librinregalo.info
www.librinregalo.info
Where menu icons are just letters animated with few codelines like:

.menu-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 40px;
    color: #333;
    text-shadow: 0px 0px 1px #333;
    line-height: 90px;
    position: absolute;
    width: 90px;
    left: 20px;
    text-align: center;
    -webkit-transition: all 300ms linear;
 -moz-transition: all 300ms linear;
 -o-transition: all 300ms linear;
 -ms-transition: all 300ms linear;
 transition: all 300ms linear; 
}

.menu-icon:hover{
    color: #f900b0;
    font-size: 120px;
    opacity: 0.2;
    left: -20px;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
}


Sources:
Web Symbols: http://www.justbenicestudio.com/studio/websymbols/
CSS3 transform: http://www.w3schools.com/cssref/css3_pr_transform.asp
CSS3 and Web Symbols tutorial: http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/




No comments:

Post a Comment