background preloader

31 CSS Code Snippets To Make You A Better Coder

31 CSS Code Snippets To Make You A Better Coder
It is almost impossible to gather in an article all the CSS code snippets that could help you in the future but here are some of the ones that you would need more often than others. Don’t get scared by the length of some of these CSS hacks’s code cause they’re all easy to implement and where is the case, they’re well documented. Besides the ones that solve common and annoying problems there are also some that solve new issues brought by the new technologies. Comprehensive List of Browser-Specific CSS Hacks Cross browser coding can be sometimes tricky but these browser specific css hacks can help you with your problems. With them cross browser compatibility comes to you served on a plate. (source) Cross Browser Vertically and Horizontally Centered Images in CSS without Tables This centers an image of unknown size vertically and horizontally within a box. (source) Cross-Browser Transparency via CSS (source) CSS Box Shadow Outer shadow Inner shadow You can see a demo at Design Resource Box (source)

Related:  HTML + CSSweb dev.HTML/CSS/JavaScript

Responsive Web Design: What It Is and How To Use It Advertisement Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too.

Take Control of Your Day: An Intro to Time Management Lost time is never found again.– Benjamin Franklin I never seem to have enough time to do the big things that I want. Those ideas that keep me up at night, my lifelong dreams and aspirations seem to stay just that. Animatable: One property, two values, endless possiblities box-shadow From: 0 0 black Gradient text jQuery plugin - Codefocus Do you want to give your HTML headers a shiny gradient? GradientText is an ultra small, easy to use jQuery plugin that will give your standard H1, H2, H3, etc. headers a gradient text color. GradientText automatically converts your text to a HTML5 <canvas> tag with the gradient you specify, and also allows for shadow. The font will stay the same as defined in your CSS.

9 Useful jQuery Calendar And Date Picker Plugins For Web Designers Event calendars and date pickers are really useful plugins for web applications. WordPress does have a date picker, which allow bloggers to schedule the article. I am a big fan of jQuery, so i always use jQuery Calendar plugins to accomplish my tasks when the clients asked me to implement an event caldendar for them. In this article, i would like to share 9 really useful jQuery Event Calendar and Date Picker plugins that every web designers and developers should know. 1. FullCalendar

Responsive Column Layouts Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I’m going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at Themify. It doesn’t require any first or last class and the number of columns can be adjusted base on the viewport.

Top 9 Animation Libraries for 2016 - Rob Attfield - Web Developer and S.E.O Lover As the various types of web technologies have evolved, so to have the animation libraries that spice up web pages. As a developer who primarily deals with the back-end, I find such animation libraries very convenient and time-saving. As client demands increase, and the imagination of developers grow, these libraries can really make visions and dreams come alive (in the browser anyway). Courtesy of SitePoint, I have listed their top nine animation libraries below – some of which I will be exploring in the near future.

Creating Different CSS3 Box Shadows Effects In this tutorial we are going to be creating box shadow effects with just CSS. Below is an image created in photoshop of different box shadows effects. These used to be the only way of creating this effect but thanks to CSS3 we can now do all this with just CSS. View Demo page to see what we are going to create CSS Box Shadow Effects Demo CSS Box Shadow We are going to be using the CSS box shadow property which is one my favourite CSS properties which you will see in this tutorial how easy you can use it. Paste CSS Vertical List Menu Home / Free JavaScripts / Menu and redirection / Here Note: Modified March 29th, 08. Fixed IE7 drop down issue (only .css file updated). Description: This is a lean CSS vertical menu.

Designer Scrabble by Andrew Clifford Capener A classic game reimagined for type nerds. No longer will you strategize about how to make a high-point word, but rather how to make the prettiest one. Andrew Clifford Capener has designed the A-1 Scrabble designer edition. From the designer: The purpose of this project was to revive an old, but loved game. The idea was to excite people about typography by giving them the ability to choose what font their scrabble set would come in. Menus Menus are vertical by default. Minimal default styling and low-specificity selectors make them easy to customize. By default, menu items take up 100% of the width of their container, so you may want to limit the menu width or set the menu to display:inline-block. To create a horizontal menu, add the pure-menu-horizontal class name.

30 Useful Responsive Web Design Tutorials So we’ve reached the end of our "Responsive Web Design week", tonight’s post will be the last of the series. We are going all out to help you hone your skills in manipulating those codes to respond at will when displayed on different devices. And to do this, we are featuring 30 Responsive Web Design Tutorials found online. This list is not meant to be an exhaustive one but it will get you started on understanding the basics of designing an adaptive website that will cater to all sorts of screen sizes. Mastering CSS Coding: Getting Started Advertisement CSS has become the standard for building websites in today’s industry. Whether you are a hardcore developer or designer, you should be familiar with it. CSS is the bridge between programming and design, and any Web professional must have some general knowledge of it. If you are getting your feet wet with CSS, this is the perfect time to fire up your favorite text editor and follow along in this tutorial as we cover the most common and practical uses of CSS. Overview: What We Will Cover Today

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I've always liked the way the menu on MooTools worked. So in this tutorial we'll recreate that same effect ... but we'll do it in jQuery! Demo and Source Code