![]() ![]() By default, only the -webkit- prefix is set to true (due to most browsers not requiring prefixes now).Īs of 2.0.0, _options also includes a $nameSpace / option which allows you to change the name all classes are prefixed with. _optionsĬontains default options, various effect options and the browser prefixes you'd like to use with the prefixed mixin. The keyframes mixin is passed the keyframe name, followed by the content, both as arguments. _mixinsĬontains prefixed and keyframes mixins that apply the necessary prefixes you specify in _options.scss / _options.less to properties and keyframes. less files: _hacksĬontains hacks (undesirable but usually necessary lines of code) applied to certain effects. Each effect is within its own file in the effects directory. Sass/LESS is used in the Hover.css project to separate various CSS into specific files. Preprocess Sass/LESS with your favourite software or the environment provided via Grunt. Sass/LESS are non-essential but can speed up development. The prefixed(property, value) Sass/LESS mixin should be used for browser prefixing instead. Note: Originally Grunt was set up to autoprefix CSS properties but to make the project as accessible as possible, this is no longer the case. With Grunt running, Sass or LESS will be preprocessed (depending on whether you work out of the scss or less folder) and CSS files will be minified. With Grunt installed, run grunt from the command line to set up a development server accessed at or your local IP for network testing. Grunt is non-essential but can speed up development. It is recommended to apply fallback effects for older browsers, using CSS supported by those browsers or a feature testing library such as Modernizr. Please see for full support for many web technologies and test your webpages accordingly. ![]() Generated Content (pseudo-elements) - not supported below Internet Explorer 8Īside from the above mentioned browsers, Hover.css is supported across all major browsers.Transforms - not supported below Internet Explorer 9.Transitions and Animations - not supported below Internet Explorer 10.Many Hover.css effects rely on CSS3 features such as transitions, animations, transforms and pseudo-elements, for that reason, effects may not fully work in older browsers. Gruntfile.js - Used for development of Hover.css via Grunt.index.html - Demonstrates all Hover.css effects.hover.scss/hover.less - Development version of Hover.css in Sass and LESS flavours._hacks.scss/_hacks.less, _mixins.scss/_mixins.less, _options.scss/_options.less - Sass/LESS Utilities. ![]() effects - Contains each individual effect sorted into categorized folders.hover.css - The development version of Hover.css.hover-min.css - The minified/production version of Hover.css.demo-page.css - Contains styles to demonstrate Hover.The project consists of the following folders and files: css Or use custom CSS to position the icon as you see fit. In css/hover.css, find the Grow CSS (each effect is named using a comment above it): If you plan on only using one or several effects, it's better practice to copy and paste an effect into your own stylesheet, so a user doesn't have to download css/hover.css in its entirety.Īssuming you want to use the Grow effect: ![]() Then just add the class name of the effect to the element you'd like it applied to. Hover.css can be used in a number of ways either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Easily apply to your own elements, modify or just use for inspiration. A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |