Creating responsive typography is a hard thing to do and not many web designers rather don’t talk about it at all. In order to provide the best experience for your users as possible, you better not avoid this subject. Let’s divide it into smaller parts and bring some more clarity into it.
Tag: tutorial
3 ways to deal with responsive images
Responsive images is one of the pillars of responsive web design philosophy. For a long time web designers have to use various creative ways to solve the problem of serving different devices with different image files. However, this should not be necessary now thanks to new picture element which was released by W3C.
Custom HTML dropdown with jQuery
Why to use pre-created or pre-packed features if you can create and build your own? Default dropdown inputs does not look good at all and options to style through CSS are quite limited. If you have few minutes and are not afraid of jQuery, you can create your own dropdown according to your ideas. Let’s… Continue reading Custom HTML dropdown with jQuery
CSS tips and tricks #3-Animated 404 page
Well designed website should also have custom designed 404 page for case that something is broken. So, today we will create notepad style 404 page with small animated bar. Font used for text is Lobster, it is free to use and you can find it online on Google fonts. Patter used for background is from… Continue reading CSS tips and tricks #3-Animated 404 page
CSS tips and tricks #1: Enhancement with Modernizr
Today is I will start to release new series focused on using CSS called “CSS tips and tricks”. This series will be made up from tutorials about how to do interesting and useful stuff only through CSS. All topics will be chosen in order to be used in real-life projects. Some of these tutorials will… Continue reading CSS tips and tricks #1: Enhancement with Modernizr
Full-screen stacked navigation tutorial
For today, we will create full-screen stacked navigation with beautiful resizing width effect on hover. Our goal is to create navigation which will take approximately 25% of the page’s width and 100% of its height. If you read previous tutorial on “Full-screen page with centered navigation”, you know what am I talking about. Navigation will… Continue reading Full-screen stacked navigation tutorial