5 Useful CSS Tricks for Responsive Design Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I’m going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They are simple CSS properties such as min-width, max-width, overflow, and relative value — but these properties play an important part in responsive design. View Demos 1. Responsive Video (demo) This responsive video CSS trick was discovered by tjkdesign.com. 2. Max-width property allows you to set the max width of the element. Max-Width Container In the example below, I specify the container to display at 800px if possible, but it should not exceed 90% of the boundary width. Responsive Image You can make the image auto resize to the max width of the boundary by using max-width:100% and height:auto. The above responsive image CSS works on IE7 and IE9, but doesn’t work on IE8. Min-Width
CSS3 Lightbox Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way. View demo Download source With the help of the pseudo-class :target, we will be able to show the lightbox images and navigate through them. The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License. Please note that this will only work with browsers that support the :target pseudo class. Let’s do it! The Markup We want to show a set of thumbnails, each one having a title that will appear on hover. The anchor for the thumbnail will point to the element with the id image-1 which is the division with the class lb-overlay. Note that we only use a navigation in the last demo. Let’s beautify this naked markup. The CSS And that’s all the style! Demos
Powerful New CSS Techniques and Tools The hard work of front-end designers never ceases to amaze us. Over the last months, we’ve seen Web designers creating and presenting a plethora of truly remarkable CSS techniques and tools. We have collected, analyzed, curated and feature latest useful resources for your convenience, so you can use them right away or save them for future reference. Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping, but share your insights and your experience instead. CSS Techniques Link Rotational Sliders1Eric Meyer shares six of his animated transforms that are capable of sliding around to a particular extent with non-centered transform origins. Generating Organic Randomness with Prime Numbers and CSS3At first, you may be wondering why the heck is Alex Walker talking about cicada’s and Web design. CSS3 Keyboard10Click in the box and start typing on your computer’s keyboard. CSS Tools Link Last Click Link
Custom Scrollbars in WebKit Way back in the day, you could customize scrollbars in IE (5.5) with non-standard CSS properties like scrollbar-base-color which you would use on the element that scrolls (like the <body>) and do totally rad things. IE dropped that. These days, customizing scrollbars is back, but it's WebKit this time. It's a bit better now, because the properties are vendor-prefixed (e.g. The Goods The Different Pieces These are the pseudo elements themselves. The Different States These are the pseudo class selectors. :horizontal :vertical :decrement :increment :start :end :double-button :single-button :no-button :corner-present :window-inactive I'm going to steal this whole section from David's blog post on the WebKit blog because it explains each part well: :horizontal – The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation. All together now These pseudo elements and pseudo class selectors work together. Very Simple Example In The Wild View Demo Related Share this:
Complete List of Best SEO-Tools Advertisement What are the best ways to boost your position in search engines? What keywords should you use on your web-pages? And which tools should you use to improve the quality of backlinks, link popularity and Google Pagerank? We deliver answers. Alexa Alexa-Ranking3 Alexa page-rank-and-rating-results Backlink Anchor Text Backlink Checker4 This tool is to check your backlinks and the anchor text used in those backlinks.Backlink Analyzer5 Research and analyze websites for link quality. Domain Popularity, Domain Stats Tools… Domain Age Tool8 This tools displays the approximate age of a website on the Internet and allows you to view how the website looked when it first startedDomain Dossier9 Investigate domains and IP addressesDomain Popularity10 This tool shows you all backlinks for the given domain, including up to 10 subpages per backlinking domain, host IP and Google PageRankDomain Stats Tool11 This tool helps you get all kind of statistics of your competitor’s domains. It's done.
The Best CSS3 Tools, Experiments And Demos For Web Developers CSS3 is already the present on the Web. An authentic reality bursting with possibilities. On a daily basis Awwwards selects the best of the Web universe with the most spectacular examples of the latest version of web styling language par excellence.Tools & Generators | Experiments & Demos | Animations & PicturesEnjoy! CSS3 Tools & Generators: At the same time that the use of CSS3 has extended, lots of tools and code generators have popped up all over the place to try and facilitate coding work and simplify the application of new properties for the developer. We've talked about some of these in a previous post, but there are more and better.Lea Verou, member of the Awwwards Jury 2012, is one of the most prolific creators of these fantastic tools. Cubic-bezier Animatable The Web Font Combinator Prefix Free -prefix-free lets you use only unprefixed CSS properties everywhere. CSS3 Experiments & Demos: CSS3 Animations & Pictures: