Récupéré: iHover une collection de survols en HTML5 et CSS3
Pour terminer cette semaine nous vous présentons un service qui peut vous être très utiles si vous cherchez à réaliser des effets de hover originaux. Découvrez le projet iHover qui propose une collection de 35 effets de survols avec pour chaque effet des petites variations. L'ensemble est présenté sur un site one page avec tous les exemples que vous pouvez tester directement et voir le code HTML pour l'intégrer rapidement. Les liens du projet iHover Démo : : Cette ressource est disponible sur GitHub avec les différents fichiers pour l'installation, le tout sous licence MIT que vous pouvez utiliser dans vos projets librement. Une petite définition pour la licence MIT pour répondre à votre curiosité : La Licence MIT provient du Massachusetts Institute of Technology (MIT), mais l'appellation est impropre car le MIT utilise aussi d'autres licences logicielles. Quelques exemples en images
Color Hex - ColorHexa.com
Loading Effects for Grid Items with CSS Animations
Some inspiration for loading effects of grid items using CSS animations. View demo Download source Today we’d like to share some loading effects for grid items with you. Since Masonry is a popular library for laying out grids, we thought it might be a good idea to use it in this demo. Please note: this only works as intended in browsers that support the respective CSS properties. The beautiful illustrations featured in the demos are by Erika Mackley. So, we’ll use an unordered list for the grid and we’ll simply add the respective effect class: The idea is to add a class to the items already shown in the viewport when we load the page. There are a couple of things that we can set. Note that we had to remove the transitions for Masonry so that there’s no conflict with the animations. I hope you enjoyed this little experiment and find it inspiring!
La liste ultime des ressources gratuites : photos libres de droits, polices, logos, icônes...
Ce n’est pas un site, c’est une pépite. Ne vous fiez pas à son esthétique assez discutable : les ressources qu’il contient sont géniales. Son nom : Blue Vertigo. Des photos libres de droits Premier listing : les photos libres de droits. Des vidéos libres de droits Autre ressource très intéressante en ce moment : des vidéos libres de droits. Des polices libres de droits Sur Blue Vertigo, il y a aussi à une liste de sites de polices libres de droits. De la musique libre de droits Le site propose aussi de la musique libre de droits. Des icônes libres de droits Des sites d’icônes libres de droits sont également référencés. Télécharger des logos Vous cherchez des logos de marques ? Sur Blue Vertigo, vous retrouverez également des dessins libres de droits au format vectorisé, des brushes Photoshop, des outils pour trouver les bonnes couleurs, des générateurs de texte… Bref, un site à conserver dans ses favoris pour garder les meilleurs outils à portée de clic !
Online CSS3 Code Generator With a Simple Graphical Interface - EnjoyCSS
Its handy and easy-to-use UI allows you to adjust rich graphical styles quickly and without coding. The main features: 2D and 3D transformsmultiple complex transitionsmultiple linear and radial gradientsmultiple box and text shadowscustom fonts (including google fonts)and much moreYou’ll be able to play with all EnjoyCSS parameters just like in photoshop or illustarator (with sliders, colorpickers and etc) combining all possible CSS3 style capabilities for the same element. Moreover you can include pseudo states (:hover, :active, :focus, :after, :before) and style them as well. All required CSS code will be automatically generated by EnjoyCSS. You can easily copy-pase all the code into your environment or get the code for each style aspect separately, e.g., code for each gradient, shadow or transform. EnjoyCSS has its own gallery of ready CSS solutions that can be used for your experiments with styles. Appreciate your time and money! Check our feed! Alexandr Lukashevich (designer)
website dimensions - exact pixels - live check
The Shapes of CSS
Learn Development at Frontend Masters CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals. We also get the ::before and ::after pseudo elements in CSS, which give us the potential of two more shapes we can add to the original element. Square Rectangle Circle Oval Triangle Up Triangle Down Triangle Left Triangle Right Triangle Top Left Triangle Top Right Triangle Bottom Left Triangle Bottom Right Curved Tail Arrow via Ando Razafimandimby Trapezoid Parallelogram Star (6-points) Star (5-points) via Kit MacAllister Pentagon Hexagon Octagon Heart via Nicolas Gallagher Infinity via Nicolas Gallagher Diamond Square via Joseph Silber Diamond Shield via Joseph Silber Diamond Narrow via Joseph Silber Cut Diamond via Alexander Futekov Egg Pac-Man Talk Bubble TV Screen Lock
ColorZilla
Important - new version 3 Due to new Firefox add-on developer requirements and restrictions requiring all future add-on development to be done using WebExtensions technologies, ColorZilla for Firefox has been re-written from the ground up to comply with the new requirements. This new version retains all the functionality, but there might be minor UI/UX and other differences. Your history and favorites palettes should be backed up under <Firefox Profile Folder>/colorzilla after the update. ColorZilla v3.3 has many improvements and fixes. See what's new. Please contact us to report any issues. ColorZilla for Firefox is an add-on that assists web developers and graphic designers with color related tasks - both basic and advanced. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. ColorZilla is also available as a Chrome extension. What's new New in ColorZilla 3.3 New in ColorZilla 3.0 New in ColorZilla 2.8
