I want to begin a walk though of css borders. Borders are something I’m sure you use on most projects. Like backgrounds you’re probably familiar with css borders and yet may not be aware of some of all the properties and their values.
Inspired by a shot on Dribbble from Morgan Allan Knutson where he showcased an animated search form using only CSS I thought I would try to re-create the effect for myself. Using a bit of CSS3 magic, the effect is actually quite easy to re-create!
You likely use css backgrounds in every site you build. You give an element a background color and tell another element to let a background image repeat. How much do you know about all the other background properties?
Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations.
There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we’ll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering.
Prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.
Mention css and tables in the same sentence and controversy is sure to follow. Web designers like myself have been telling you not to use html tables for layouts and now here we have a way to create tables with css alone.
Last week I posted part one of this tutorial series covering the process of creating a typography based blog design in HTML5 and CSS3. We finished off the Photoshop concept with the design based on a strict grid and text laid out in our desired typeface. Now let’s replicate the design in a static HTML5 and CSS3 prototype before finishing it all off as a fully working WordPress theme.
In today’s tutorial we’ll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. The idea is to avoid that the user has to scroll the content area into place..
How cool is it to sometimes just display content a little bit differently? Today we want to share an experiment with you that let’s you show images and content in a unique form – a wave. The idea is to initially have some smaller thumbnails rotated and placed in the shape of a sine curve. .
A brand new feature introduced in jQuery 1.7 is $.Callbacks, which we’ll be taking a look at today. $.Callbacks are a multi-purpose callbacks list object and if you’ve had a chance to play around with jQuery’s $.Deferred functionality (Julian Aubourg and I wrote about it previously), you may be surprised to know that this is one of the core building blocks that make that feature possible.
jQuery custom scrollbar script lets you replace the default scrollbar of overflowing content with a custom image based one instead. Both horizontal and vertical scrollbars are supported. The script once initialized also exposes several public methods for dynamically scrolling to particular points within the content. With an image as the scrollbar interface, the sky’s the limit as far as how it could look!
In this tutorial, I will show you how to create an interesting jQuery-powered one-page site. One page sites are usually a great way to show your prospective clients how good you are at what you do. This one is no exception.
A combination of an image slider and an accordion, the slidorion displays beautiful images along with a variable length description. With images linked to each tab, and accompanied by a large array of effects, the slidorion is a great alternative to the traditional jQuery slider.
Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.