CSS

  • IcoMoon, Fontello and Fontastic.me: Best of Icon Fonts

    Icons are the best invention since canned beer, at least designers might agree. They are definitely on the rise in popularity. Mobile devices with their comparably small screens boost the use of icons as natural choices for navigation menus in modern web design. New icon sets get created by the hour. Especially mobile design is the trigger for a new breed of icons. These are no longer implemented in the form of individual PNGs or so-called sprites. Icon’s successor is the icon font. Iconfonts have many advantages with the biggest being their free scalability to any size, while at the same time reducing server requests to an absolute minimum. The downside of icon fonts is, that in most cases you will not need the whole font set or – even worse – need icons from different font sets. Font generators have come to deal with both of these problems. Today we’ll take a look at three of the best generators the web has to offer…



    Read more 
  • Building an Interactive Navigation Bar with HTML/CSS

    A straightforward navigation structure can increase the usability of your site, and make information easy to find. By using basic HTML and CSS, you can build a horizontal nav bar that provides interaction when a user hovers over a navigation link.



    Read more 
  • Best of July 2013: 30+ Brand-New HTML/PSD Themes & UI Elements

    This is the second compilation in our monthly series of brand-new HTML/PSD themes and UI elements. All the works exposed here are fresh resources from the month of July 2013. You will find another big set of ready to use themes, templates and elements for the web as well as completely editable files for your favorite image or vector editor. We got something for everybody…



    Read more 
  • Summer 2013: The best HTML/PSD Themes & UI Elements of the Season

    If you develop websites and your environment is not WordPress, you still don’t need to live your online life in visual darkness or hide beneath the sheets. We curated a list of awesome templates layered in HTML and CSS to make your work easier, and with a lot of different grooves to find the appropriate one for your web. Or, if you are you more confortable developing your own theme based on some pre-built elements, here is the inspiration you need to create an awesome theme or application. Starting with the PSDs  and UIs shown below, you can create your own awesome design. Take a look!



    Read more 
  • CIKONSS 1.0: Responsive Icons In Pure CSS, IE Doesn’t Fail

    cikonss-startpage-550

    Icons based on PNG, GIF or JPG are nothing new. Relatively new is the way to store all icons in one single PNG and access them via CSS, the so-called sprites. Even more interesting is the complete omission of file-based structures using nothing but pure CSS. CIKONSS does just that. And as these symbols are based on CSS2, even Internet Explorer 8 supports them.



    Read more 
  • CSS Architectures #1: Principles of Code Cleanup and the New Best Practices

    Box-Models in Real Life Can Come Over Complicated, too

    All too often, the CSS for major (and minor) websites is a textbook case of code bloat and redundancy, with lines of code that boast unnecessary use of qualifier elements, overly specific selectors from unnecessarily long selector chains, overdependence on descendent selectors when other selectors would be more appropriate, and the inappropriate or unnecessary use of !important. We’ll show you better ways in the following article…



    Read more 
  • Unusual Code Checker: Holmes Validates HTML, Uses CSS To Do So

    holmes-w550

    Of course it is advisable, no, mandatory to have your source code checked, double-checked and validated to avoid errors and to ensure standards compliance. Instead of having your project run through one of the many validators out there, you can opt to use the brand-new diagnostic tool by the clever name of Holmes to achieve the same. Holmes is a tool, that uses CSS to check your source code for non-compliant and invalid HTML. Here is how it does it…



    Read more 
  • CSS Matic – “What You See Is What You Get” for CSS Developers

    Homepage

    Long gone are the times where we had to code CSS entirely by hand. It’s already been a while since more and more little helpers started to get created. These little helpers usually cover one single aspect of CSS and support it with a more or less elaborate graphical UI for visual development in the likes of WYSIWYG. Today I want to introduce you to a rather new service from Spain, which comes to cover four basic missions every CSS developer has to accomplish. The service is called CSS Matic and its creators are quite known in the field of web design.



    Read more 
  • How To: Genericons – 62 Vector Icons Webfont by WordPress Creators Automattic

    genericons-w550

    Not only do we see a massive growth in the number of mobile devices, also the capabilities of these little handsets improve with every new generation. It’s an irreversible trend, commonly known as HiDPI, that causes lots of work not only, but also for web designers. If you have ever had the pleasure of looking at a non-retina app on one of the new MacBooks Pro, you know what I’m talking about. WordPressers Automattic made sure that their blogging software got equipped with retina-capable iconry during the latest update. A few days ago they published Genericons, an icon webfont made up of vectorized symbols…



    Read more 
  • Typeplate: Starterkit Cares For Decent Typography – Doesn’t Care For Web Design

    typeplate-homepage-w550

    Typography and web design should go hand in hand. But since the possibilities to implement proper typography have only just emerged in the last few years, a lot of developers are stuck in their traditional mindset. Of course everybody will agree that typography is important, but when it comes down to fish or cut bait, often only the bare necessities get done. With Typeplate, there is a chance that this might change, as Typeplate doesn’t exactly transform typography on the web to a no-brainer, but it really simplifies the process.



    Read more 
search form
 
image description image description