background preloader

HTML - CSS

Facebook Twitter

Glitch Effect. Inspiration for Text Styles and Hover Effects. A couple of creative text styles and hover effects for your inspiration.

Inspiration for Text Styles and Hover Effects

Some effects use experimental techniques including SVG masking and Canvas. View demo Download source When it comes to tiny animations and effects on text, be it a link, a typographic logo or an introductory sentence, there’s really no limit to the creative possibilities. So today we’d like to share a couple of text styles and hover effects with you to get your creative juices flowing. We hope you enjoy them and find them inspiring! We’ve laid them out in “fullscreen” using a big font size so that you can see the effects in detail. Online CSS3 Code Generator With a Simple Graphical Interface - EnjoyCSS. Transformicons. CSS3 Hover Link Effects.

Inspiration for Button Styles and Effects. A collection of fresh button styles and effects for your inspiration.

Inspiration for Button Styles and Effects

We use CSS transitions and pseudo-elements for most of the effects. View demo Download source Today we’d like to share some fresh button styles and effects with you. The current “button trend” is quite exciting since there are a variety of design details in use which allow for a great diversity of styles. There are lots of thin lines but also bold typography and vice versa. In order to keep things overseeable, we’ve chosen to trigger any effect on hover. Please note that some of the techniques used are only supported in modern browsers.

We use CSS transitions in most cases but we also have a couple of examples with CSS animations. This time, we’ve used a kind of modular approach, where we set certain properties like border-radius, font-size, border, etc. in separate classes so that creating a certain button style becomes more simple. The Markup <button class="button button--ujarak">Vote</button> Hover.css - A collection of CSS3 powered hover effects. All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours.

Hover.css - A collection of CSS3 powered hover effects

Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Licenses. Button Styles Inspiration. Winona Ujarak Wayra Tamaya Rayen Pipaluk Moema Based on the "Add New Location" button concept by Charles Patterson.

Button Styles Inspiration

Isi Aylen Saqui Wapasha Nina. 3 cool CSS3 image hover effects. On the modern web there are numerous techniques that can be used to create interesting interactions, but the simplest and most elegant is usually CSS, and specifically the additions that came with CSS3.

3 cool CSS3 image hover effects

Back in the old days, we had to rely on JavaScript for this kind of effect, but thanks to ever-increasing support for CSS3 across browsers, it’s now possible to set up effects like these without any scripting at all. There are sadly still browsers (IE9 and below) that don’t support CSS3, so you’ll either need a fallback for legacy browsers or to treat the effect as a progressive enhancement. Today, we’re going to look at how we can apply cool, but neat hover effects to show and hide images captions. If you’d prefer to follow along with the code, you can download the files here. Demo 1 The first demo is our simplest: the image will fly to its right to reveal the caption. The markup. Marka - Beautiful transformable icons. Page Scroll Effects. Main column with sidebar. Smooth Page Scroll. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Smooth Page Scroll

Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Top quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Main column with sidebar. Animatable: One property, two values, endless possibilities. Box-shadow From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou.

Animatable: One property, two values, endless possibilities

30+ jQuery Plugins For Scrolling Effects With CSS Animation - ninodezign.com. One of the trendiest techniques to have fun with is scrolling.

30+ jQuery Plugins For Scrolling Effects With CSS Animation - ninodezign.com

A bit of website animation can be fun and enticing to new visitors, animated page elements do not offer major alterations on content, but can provide a more extraordinary user experience. Many website developers use different ways of scrolling to make their websites more alluring and interesting to their viewers so that they don’t get bored. To save all the web developers lots of time and trouble of searching for such JQuery plugins of scrolling effects we bring you 30+ jQuery plugins for scrolling effects with CSS animation. These plugins will help you get some amazing scrolling animation on your website with no time. 10 useful CSS generation tools for web designers. CSS has evolved at a crazy pace in the past years.

10 useful CSS generation tools for web designers

Stylesheets are becoming more and more complex, and the possibilities they offer go much further now. You can even draw or create small animations with it.