CSS - Front-end Developer

Animated Responsive Layout with CSS3 Media Queries

By Coding No Comments

What Are Media Queries

CSS3 brings us many new features we use for our web designs and one of the features that can help improve the web site usability is Media Queries.

Media Queries Boilerplate

Animating the layout change

With CSS we can add animation to your different elements, we can also assign animation to the different properties on those elements.

If we are using media queries then we are most likely going to change the Width and Height of an element so that it can fit on the page. As we know that width and height are changing we can add animation to the CSS property of Width and Height by using the following code.

Adding the above to an element of your media queries adds animation to the width and height changes of your media queries.

HTML5 and CSS3 feature-detection with Modernizr library

By Coding, Graphics No Comments

Ten years ago, only the most cutting-edge web designers used CSS for layouts and styling. Browser support for CSS layouts was slim and buggy, so these people advocated for web standards adherence, while creating hacks that made CSS layouts work in all browsers. One hack that became widely used was browser sniffing: Detecting which browser and version the user had by looking at the navigator.userAgent property in JavaScript. Browser sniffing allowed for quick and easy code forking, allowing developers to target different browsers with different instructions.

Read more

Great CSS3 and HTML5 Resources

By Coding No Comments

In this “Collection of HTML5 and CSS3 Resources“, you will find articles and tutorials covered on different websites. Demos and examples are also included in this list. I tried my best to collect all useful and related information to put at one place. Still if you find something missing, kindly share it in the comments below. Read More

CSS Frameworks, cut down on your development time.

By Graphics, Mobile No Comments

A CSS framework, also known as a web design framework is a pre-prepared library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks (usually packaged as external .css sheets inserted into the header) package a number of ready-made options for designing and outlaying a webpage.

Top 17 CSS Lightbox Variations

By Coding No Comments

CSS techniques to overlay images on a webpage.

  1. Lightbox JS : Original; a simple, unobtrusive script used to overlay images on the current page.
  2. Greased Lightbox : Greasemonkey/Creammonkey/Opera user script designed to enhance browsing on websites that link to images such as Google Image Search, Flickr, Wikipedia, Facebook, MySpace, and deviantART.
  3. GreyBox : A pop-up window that doesn’t suck.
  4. Greybox Redux : Completely unobtrusive – no need to embed Javascript into your site.
  5. Leightbox : uses inline div’s instead of AJAX calls.
  6. Lightbox Plus : by Takuya Otani
  7. Lightbox Gone Wild : at ParticleTree
  8. The Lightbox Effect without Lightbox : by PJ Hyett
  9. LITBox 2.0 : modified Thickbox made into a Prototype class based off of the Scriptaculous.
  10. Multifaceted Lightbox : at GregPhoto
  11. Prototype Window Class : at Xilinus
  12. Suckerfish HoverLightbox : hover + gallery + lightbox at MondayByNoon
  13. Thickbox – One box to rule them all. : by Cody Lindley
  14. Slightly ThickerBox : Thickbox with Prev and Next links at Jasons Toolbox
  15. WP lightbox JS WordPress plugin : WordPress Plugin by Safirul Alredha
  16. Lightbox2 : WordPress Plugin at m3nt0r – beyond the net
  17. GreyBox Plugin : WordPress Plugin at aNieto2K