Animated Opening Type A tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions. The idea is based on Edenspiekermann's Open Type project and it's a very creative way to display and play with letters. View demo Download source In this tutorial I’m going to explain how to achieve an interesting 3D opening type effect with CSS based on the one I previously created. Please note that pseudo-element transitions don’t work in every browser. The Markup The markup needed is pretty simple, just a span that contains the character, but since we’re going to work with generated content we must add a custom data-attribute for repeating the text of each letter. The CSS Let’s add some basic styles to the letter span. Note that we have also added position:relative to the span because this will make the pseudo-elements’ absolute positioning work. To clone the characters we use the content property to access the custom data-attribute.
Tetris & The Power Of CSS To be really good at CSS, you have to learn CSS. I know this sounds like a tautology but I've become aware of a peculiar attitude that preprocessors such as SASS are somehow successors to CSS. Some SASS and LESS nerds are fond of proliferating the following aphorism. It should be noted that its author did not himself intend it as an advocation of preprocessors. The four stages of CSS:1. They forget that all preprocessors do is make writing CSS easier, not qualitatively different: It's still CSS that comes out of the end. Put down your classes, ladies and gentlemen, because we're talking about dynamic content and they cannot save you now. Incomplete grids Let's imagine we have a three-column grid but that we don't know how many items will be in that grid. Now, I'm the sort of designer who couldn't give a toss about "pixel perfection" so long as the page is usable and accessible. We could do this by adding some logic to the template and writing a last class to whichever item comes last.
High Performance Animations We’re going to cut straight to the chase. Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps. Take a look at this side-by-side slow motion video of the same animation: One is done with transforms, the other isn’t. From DOM to Pixels in DevTools When you use the Chrome DevTools timeline you should see a pattern similar to this: The process that the browser goes through is pretty simple: calculate the styles that apply to the elements (Recalculate Style), generate the geometry and position for each element (Layout), fill out the pixels for each element into layers (Paint Setup and Paint) and draw the layers out to screen (Composite Layers). To achieve silky smooth animations you need to avoid work, and the best way to do that is to only change properties that affect compositing -- transform and opacity. Animating Layout Properties
CSS Overlay Techniques There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to explore each technique's styles with their pros and cons. Design patterns, a set of best practices and techniques that aim to solve some of the most common design “problems”, are usually presented in the context of design principles. One of these design principles is the “Stay On Page” principle. We can decide intelligently when to keep the user on the page and model his process. Lightweight overlays can be used for asking questions, obtaining input, introducing features, indicating progress, giving instructions, or revealing information. When the user interaction is only accepted in the pop-up modal, a Lightbox effect is usually applied and the rest of the page is dimmed, indicating its inactivity. Technique #1: Absolutely positioned element I have set up a pen on Codepen so you can test the result of this technique here.
Text Shadow Generator | CSS3 Generator | CSS3Gen Use this CSS3 text shadow generator to easily add text shadow styles into your web project. Your browser does not support the CSS3 text-shadow property. You can still use this tool to generate the CSS3 rule, but you won' be able to see the results. <div class="error_msg">Please enable Javascript to use this page. Text Shadow Explained The CSS3 text-shadow property is one of the most popular techniques of progressively enhancing the design of a website. The text-shadow property is really simple to use. It takes four values: the first value defines the distance of the shadow in the x (horizontal) direction, the second value sets the distance in the y (vertical) direction, the third value defines the blur of the shadow and the last value sets the colour. While this is relatively easy to remember compared to other CSS3 rules such as border-radius, it is useful to have a generator such as this so that you can generate your text-shadow in real time and fine tune it with Photoshop-like controls.
Techniques for Creating Textured Text In this article we'll explore all the current techniques for creating image or texture filled text and show you how to apply them. View demo Download source In this article we’re going to explore several techniques that can be used to create textured text or apply a background to text. Please remember that some of the techniques covered in the article are experimental with very low browser support, and may not be the best technique to use when you’re building real projects that need wide browser support. I’ve included a screenshot for each demo, the link to the demo in the end of each technique. Applying an Image Background to Text Using -webkit-background-clip: text We’re going to start with the CSS background-clip property and use it to get the following result: The CSS background-clip property determines an element’s background painting area, which is the area within which the background is painted. We’re going to use a “fat font”, so that the background is more visible through the text.
Beautiful Slide Out Navigation: A CSS and jQuery Tutorial Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare […] View demoDownload source Today I want to show you how to create an amazing slide out menu or navigation for your website. The icons that we will be using are from the Colorful Sticker Icon Sets 1, 2, 3 and 4 by DryIcons. Ok, let’s get to work. 1. The only thing we will need for the navigation is a simple unordered list with links inside of the list elements: The list is getting an ID because we want to refer to it later in the JavaScript. 2. First, we define the CSS properties for the list: The navigation should always be accessible for the user, even if he scrolls down the page. Now, let’s look at the list element properties: For the links in the list elements, we define the following CSS properties: The JavaScript
Circle Hover Effects with CSS Transitions From our sponsor: Get started on your Squarespace website with a free trial In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it! 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: 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 Example 1 And now, the interesting hover action!
Dot Navigation Styles Today we'd like to share some subtle effects and styles for simple dot navigation with you. These styles could, for example, be used for a page scroll navigation or a thumbnail preview, in a vertical or horizontal fashion. View demo Download source Small UI elements usually don’t get too much attention when it comes to creative effects. Note that some effects might not work as intended in some browsers (SVG transition, 3D transform-style). For the structure we’ll have an unordered list with links: <div class="dotstyle dotstyle-fillup"><ul><li class="current"><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Products</a></li><li><a href="#">Portfolio</a></li><li><a href="#">Blog</a></li><li><a href="#">Contact</a></li></ul></div> For some examples, we also use an additional empty list element, i.e. in order to “move” the current item in the “dot move” style. We define some common styles: Hope you enjoy these styles and find them inspiring!
Fullscreen Overlay Effects Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays. View demo Download source Today we’d like to share some inspiration on fullscreen overlay styles and effects with you. Note that these effects were created with modern browsers in mind so they might not show the desired effect in older ones. An example for a subtle, yet interesting effect is the first one which got inspired by the same effect on Huge. We use the visibility trick to make the overlay disappear completely: we set a transition delay for the visibility property which allows the opacity to be transitioned first. For some of the SVG examples we use Snap.svg to morph a path into another one. We hope you enjoy these effects and find them inspiring!
Perspective Page View Navigation Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects. View demo Download source Pushing the site content aside to reveal a navigation has certainly become a trend for mobile navigations. Please note that this is highly experimental, so let us know if you find any bugs or problems. For the general effect to work, we need to wrap our page into a perspective wrapper. When we trigger the effect, we’ll need to change the position and overflow of the divisions to just show the current view. Depending on which effect we have set as a class to the perspective wrapper, we’ll animate the container and the menu items once we click the trigger button. We also added some example media queries that show how to resize or reposition the menu for smaller screens. There are two styles for the menus which is a horizontal and a vertical one.
UI Animation and UX: A Not-So-Secret Friendship Using the words “animation” and “the web” together tends to conjure up memories of frantic searches for the “skip intro” button to save ourselves from a terrible sensory assault. Animation on the web has hit some pretty sad lows, there’s no arguing that. But adding motion to our work can be meaningful and functional—when we find the right circumstances. Article Continues Below When used as more than just a subtle design detail, animation can provide cues, guide the eye, and soften the sometimes-hard edges of web interactions. A CSS animation refresher#section1 This article uses CSS animations and transitions in the associated examples. CSS animations are what we most closely associate with traditional animation. CSS also has transitions—which, as it happens, can also be used to make things move. In practice, animations and transitions are often used together, so I’ll use the term animation in a general sense to indicate them both. Softening the edges#section2 1. 2. 3. Go forth and animate!