background preloader

Circle Hover Effects with CSS Transitions

Circle Hover Effects with CSS Transitions
A tutorial about how to create different interesting hover effects on circles with CSS transitions and 3D rotations. View demo Download source In today’s tutorial we’ll experiment with hover effects on circles. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. We will omit vendor prefixes in this tutorial. So, let’s get started! The HTML For most of the examples, we’ll be using the following structure: <ul class="ch-grid"><li><div class="ch-item ch-img-1"><div class="ch-info"><h3>Use what you have</h3><p>by Angela Duncan <a href=" on Dribbble</a></p></div></div></li><li><div class="ch-item ch-img-2"><div class="ch-info"><h3>Common Causes of Stains</h3><p>by Antonio F. Although we could use images here, we’ll give ourselves a bit more freedom by using background images instead. Now, let’s make some hover effects! The CSS Let’s define some common style for the list and the list items: Example 1 Related:  Plugins/codesDrupal

Creative Button Styles From our sponsor: Create spectacular WordPress sites with ease. Today we would like to give you some button inspiration. This button set consists of some simple, creative and subtle styles and effects to inspire you. The icons, which we add using the :before (and sometimes :after) pseudo-class, are from IcoMoon and we’ve created them with the IcoMoon app. Please note: this only works as intended in browsers that support the respective CSS properties. The markup of a button is really simple. <button class="btn btn-6 btn-6d">Button</button> The common styles for all the buttons are some resets defined in .btn and we use the specific numbered classes for the different sets of styles. An example for a specific button style is the following: Which will of course depend on what we define as a common style in .btn and .btn-6. This class structure is used for demo purposes. I hope you enjoy the styles and find them inspiring!

Un e-mail en HTML responsive multi-clients L'e-mail (ou newsletter) reste encore aujourd’hui un moyen efficace de transmettre des informations à ses utilisateurs ou clients. En mode texte, aucun problème, c'est un standard interprété sans difficulté. En mode HTML c'est un art ô combien délicat en partie dû au nombre de clients lecteurs d'e-mail sur le marché qui ont des comportements bien différents (encore plus désormais que les navigateurs classiques). Les clients e-mails lourds (Outlook, Thunderbird, Lotus Notes...) ont un fonctionnement radicalement différents des webmails (Gmail, Yahoo Mail, Hotmail, Outlook.com...). Mettons fin immédiatement à vos désirs les plus fous : encore plus que le web, la réalisation d'e-mails graphiques en HTML, au pixel près ou presque, sur toutes les plates-formes, est une utopie. Voici par exemple un rendu du modèle proposé dans cet article, sur Outlook version web et Outlook client Windows 8 (pourtant récents, promus par le même éditeur, et pour le même événement). Le Doctype Règles générales

Original Hover Effects with CSS3 The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example. View demo Download source Please note that this will only work properly in modern browsers that support the CSS3 properties in use. The Markup The structure of markup is very simple and intuitive. Inside the view insert an element with the class mask that will be responsible for our effects driven by CSS3 and inside it we will put a title, description and a link to the full image. <div class="view"><img src="image.gif" /><div class="mask"><h2>Title</h2><p>Your Text</p><a href="#" class="info">Read More</a></div></div> The CSS After creating our markup we’re going to set our style. And now we’ll look at the ten effects. Example 1 And now comes the heart of our effect. Example 2 Example 3 Example 4

Guide to CSS support in email Version history 14 November 2017 Outlook.com and the Outlook iOS app added support for CSS background images and some related properties, as well as certain Flexbox and Grid properties. Also added iOS 11 Mail to the guide, with no noticeable differences from iOS 10. 22 September 2017 Microsoft updated the Outlook apps for iOS and Android with more consistent CSS support, including media queries. 13 September 2017 A complete rewrite and redesign of the guide, testing 278 different CSS properties and features across 35 email clients. To accommodate the huge increase in content, we’ve added search functionality and the ability to link directly to individual the email clients and properties for easy sharing.Discuss this on our blog. 2 May 2014 Removed support for various selector options (E) in Gmail and added support for direction, vertical-align and list-style-type in Outlook ’07/’10/’13. 19 September 2013 30 January 2013 1 February 2012 background-image is now supported in Gmail. 10 December 2010

Caption Hover Effects A tutorial on how to create some subtle and modern caption hover effects. View demo Download source Today we want to show you how to create some simple, yet stylish hover effects for image captions. Please note: this only works as intended in browsers that support the respective CSS properties. The images used in the demos are Dribbble shots by talented Jacob Cummings. Let’s get started. The Markup The structure of our grid and the figures will be made of an unordered list and each item will contain a figure element. <ul class="grid cs-style-1"><li><figure><img src="images/1.png" alt="img01"><figcaption><h3>Camera</h3><span>Jacob Cummings</span><a href=" a look</a></figcaption></figure></li><li><figure></figure></li></ul> Please note that using a figure only makes sense if it does not constitute the main content itself but if it’s typically referenced from the main flow of the document and if we can move it away (to an appendix for example).

32 Responsive Email Templates for Your Small Business Mobile and tablet email opens hit 50% this year, illustrating the need for businesses to design email campaigns for the growing mobile market. Designing for mobile is as important for your emails as it is for your website. Campaign Monitor notes, "Providing a less-than-optimal reading experience on the small screen may not only inconvenience a few recipients, but eventually the majority," leading to severely diminished response rates. We've collected 32 of the best free and premium responsive email templates to help you improve the mobile email experience for your customers. This set of five responsive email templates from the team at ZURB uses the viewport tag and a fluid layout, with media queries ready for the more limited email clients. Price: Free 2. Originally made for transactional emails with dynamic content, Antwort's responsive layouts fit and adapt to email client widths. 3. 4. Price: $18 5. 6. 7. Freelancer is a simple, beautiful template suitable for most businesses. 8. 9. 10.

Shape Hover Effect with SVG In this tutorial we'll recreate the hover effect as seen on The Christmas Experiments website. We'll be using SVG for the shape and Snap.svg for animating it on hover. View demo Download source If you have visited the fantastic new edition of The Christmas Experiments then you might have noticed the really cool hover effect in the Christmas calendar that uses a triangular shape. The shape is made up of a triangle using borders and today I would like to show you how to achieve the same effect using SVG and Snap.svg. The illustrations used in the demos are by talented Isaac Montemayor. So, let’s get started! The Markup What we’ll do first, is to draw two shapes in a vector graphics editor like Adobe Illustrator or Inkscape. The “d” (path data) value is what you are looking for. For the markup we’ll have a section with the class “grid” which contains figures wrapped in anchors. The SVG will have the respective viewBox values for the graphic and a preserveAspectRatio of “none”. The CSS

Ink: A Responsive Email Framework from ZURB We know building HTML emails is hard, especially responsive emails. That's why we created Foundation for Emails. Get away from complex table markup and inconsistent results. Use Foundation for Emails to spend less time coding emails, and more time on other things, like building amazing products. Email marketing is good for your business. Common UI Patterns to Build Faster You can use these UI patterns in your designs to quickly get your email into shape. Emails that work in all of the major clients, even Outlook There’s no need to worry about inconsistent spacing and odd rendering issues with your layouts. View our compatibility chart → The ZURB Email Stack will make you an email pro Upgrade your email workflow to save time be more efficient. Learn more about the ZURB Email Stack → Inlining CSS is was a pain It used to be that every time you had to make a change to your email, you had to copy the contents, open the inliner in your browser, paste it in and inline. Check out our web inliner →

Related: