Top 10 CodePens of the Week #5. CSS Shake. Some CSS classes to move your DOM! The basic collection Bs Basic Shake Ss Slow Shake Ls Little Shake Hs Hard Shake ⇄ Fixed Horizontal ⇵ Fixed Vertical ↻ Fixed Rotation Os Opacity Shake ✌ Crazy Shake ℇ Constant Shake % Chunk Shake Launch the animations from the parent with class 'shake-trigger' (customizable) Get started... $ git clone or $ bower install csshake $ npm i csshake or Download Center Download separated files for each shake animation, expanded or minified. cdnjs.com New Include the css file then apply classes to elements Some things you could add... 🙊 Freezed after Shake 🙈 Constant and stops on :hover The do-shake @mixin, and so on...
The about, the idea, and the desire to hear from you to improve the code... I had to make a shake animation for a big project. Download Fork me on Github. Ce que vous avez toujours voulu savoir sur CSS - Vincent De Oliveira. Aujourd’hui, c’est un fait: tout le monde connaît et utilise CSS. Et c’est tant mieux! Cependant, bien que le langage en lui-même soit plutôt simple, certains aspects peuvent sembler encore obscurs. Cet article fait suite à une présentation que j'ai donnée lors de la Kiwi Party 2013, puis lors des MSTechDays 2014. CSS, c’est simple «Le langage CSS, c’est très simple». Ne vous cachez pas, je vous vois… On s'est tous déjà dit: <td>CSS Sucks</td>! La cascade CSS Le C de CSS signifie Cascading (cascade en français), ça tout le monde le sait. Les feuilles Author: les devs webles feuilles User: les utilisateursles feuilles UA: les styles navigateurs (modifiés éventuellement par les réglages des utilisateurs) La cascade CSS applique alors un poids à chaque déclaration en suivant cet ordre: récupération de toutes les déclarations CSS pour le média cibletri des déclarations suivant cet ordre UAUserAuthorAuthor !
On remarque que les styles utilisateurs ! Spécificité des sélecteurs Les valeurs CSS. 10 Amazing and Creative CSS3 Experiments. CSS is the acronym or the short form of the term cascading style sheets. It is basically used to describe the presentation semantics or the looks and formatting of the document. This document is initially written in a mark-up language. Although it is used for various different purposes but the most common purpose is to style or design the web pages. It can style those web pages that are written in either HTML or XHTML. Its our pleasure to share best resources for inspiration for developers and designers. 1) CSS Tricks 2) CSS3 Patterns 3) Experiment CSS3 Animation 4) CSS3D Clouds 5) Pure CSS3 Classic Train 6) 3D Animation CSS3 7) Cursor Monster 8) CSS3 – Walking 9) Cube 3D 10) CSS3 Experiment Related Post.
Modular front-end development with LESS. I am constantly looking for ways to make my work as a front-end developer easier and more efficient, but it is only recently that I have paid my good friend CSS any real attention. This article will explore the benefit of organizing your code efficiently while keeping it reusable and modular. I am constantly looking for ways to make my work as a front-end developer easier and more efficient, but it is only recently that I have paid my good friend CSS any real attention.
The whole movement to make this sector of front-end development easier started with grid systems and the idea of object-oriented CSS, and has since been made easier with extensions to the language itself in the form of CSS pre-processors — the two most well-known being LESS and Sass. This article will explore the benefit of organizing your code efficiently while keeping it reusable and modular. Let’s get started! The tools of speedy CSS development Separate structure and skin. It would be better to write: And so forth. Adaptive Images for Responsive Designs.
So you’ve been building some responsive designs and you’ve been working through your checklist of things to do: You started with the content and designed around it, with mobile in mind first. You’ve gone liquid and there’s nary a px value in sight; % is your weapon of choice now. You’ve baked in a few media queries to adapt your layout and tweak your design at different window widths.
You’ve made your images scale to the container width using the fluid Image technique. You’ve even done the same for your videos using a nifty bit of JavaScript. You’ve done a good job so pat yourself on the back. But there’s still a problem and it’s as tricky as it is important: image resolutions. HTML has an <img> problem CSS is great at adapting a website design to different window sizes – it allows you not only to tweak layout but also to send rescaled versions of the design’s images.
HTML is less great. Well, OK. Adaptive image techniques Adaptive Images So, what does this solution do? Sound good? Caveats. Codrops - useful drops of code. 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. Please note that this will only work with browsers that support the :target pseudo class. Let’s do it! The Markup We want to show a set of thumbnails, each one having a title that will appear on hover. The anchor for the thumbnail will point to the element with the id image-1 which is the division with the class lb-overlay.
Note that we only use a navigation in the last demo. Let’s beautify this naked markup. The CSS And that’s all the style! Demos. Experimental CSS3 Animations for Image Transitions. Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We'll be using CSS3 3D Transforms for Webkit only. View demo Download source Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only. Check out the Photo Transitions at the Safari Technology Demos site, some of which we got inspired by. The images used in the demo are by Joanna Kustra.
Please note that the 3D effects will only work in Webkit browsers. How it works Given a set of images, we’ll add the first image to the wrapper with the class te-cover. The main idea is to always show the regarding image using te-cover. Demos Each demo will have a group of possible transitions that can be selected from the dropdown menu above the image. We hope you like our little experiment and find it inspiring and useful! Media Queries. Les sprites CSS - Alsacréations. Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS.
La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position. Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives).
Il est donc déconseillé de l'employer pour des images dont le contenu est pertinent (menu par exemple). Les avantages des sprites CSS sont multiples : La technique des sprites CSS Principe (avec sprite)