background preloader

Hover.css - A collection of CSS3 powered hover effects

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. 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 Hover.css is made available under a free personal license and paid commercial license. The Free Personal License allows you to use Hover.css for personal use only. Commercial License If you want to use Hover.css to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. Once purchased on UpLabs, you’ll receive a commercial license PDF and be all set to use Hover.css in your commercial applications. MIT License (Pre v2.2.0 / 24th March 2017) Hover.css is now available as an Eager App

Related:  zan_dzHTML - CSSCSSCode & DevelopmentWebdesign Tools

Button Styles Inspiration Winona Ujarak Wayra Tamaya Balloon.css — CSS tooltips for HTML elements Simple tooltips made of pure CSS Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS. Github ProjectDownload CSS Positioning For positioning, use data-balloon-pos attribute with one of the values: up, down, left or right <button data-balloon="Whats up!"

CSS3 Box Shadow Generator - CSS3gen Use this CSS3 box shadow generator to quickly generate box shadow CSS for your project. Your browser does not support the CSS3 box-shadow property. You can still use this tool to generate the CSS3 rule, but you won't be able to see the results. <div class="error_msg">Please enable Javascript to use this page.</div>

CSS ShortHand Property Cheat Sheet digg Shorthand properties can be used to set several properties at once, in a single declaration, instead of wasting your precious time and space making declaration for each individual property. With css shorthand we make our code less complicated and more readable for those who want to explore it. Unfortunately, quite a few shorthand properties are available, that`s why we`ve collected most useful and most used for you. But be careful shorthand declaration is effective when condensed correctly, sometimes it can bring surprises. We hope that today`s freebie come in handy. Download Builder jQuery UI Download Builder Quick downloads: Release Candidate (Themes) (1.12.0-rc.2: for jQuery1.7+) | Stable (Themes) (1.11.4: for jQuery1.6+) | Legacy (Themes) (1.10.4: for jQuery1.6+) | Legacy (Themes) (1.9.2: for jQuery1.6+) All jQuery UI Downloads

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. 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

Flex Layout Attribute (FLA) 02. Features & benefits Link Dedicated HTML attribute Separated layout markup, semantic & concise syntax. Beyond grids Ratio relationships, element sizes based on a scale. Test Your Browser For CSS3 Compatibility Home / CSS3 Selectors Test Is your browser compatible? After starting the testsuite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors.

Inspiration for Button Styles and Effects A collection of fresh button styles and effects for your inspiration. 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. Rails Internationalization (I18n) API The Ruby I18n framework provides you with all necessary means for internationalization/localization of your Rails application. You may, also use various gems available to add additional functionality or features. See the rails-i18n gem for more information.

10 useful CSS generation tools for web designers CSS has evolved at a crazy pace in the past years. 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. That complexity makes it often more tedious to work with CSS. That’s the reason why we need tools to make the creation process easier, so we don’t spend too much time on stylesheets and stay productive. Here is a list of CSS generation tools that will make your life as a web designer much easier.

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.