Text Opening Sequence with CSS Animations A simple and fun text opening sequence effect with blurry letters using CSS animations. View demo Download source Today I want to show you how to create a fun little typography effect with CSS animations and text shadows. Maybe you know those eerie opening sequences of movie trailers where some text is being faded in on a dark background. After seeing Introducting Briefs (which is not a terror movie trailer but a preview for an interesting app) I got inspired for recreating the effect using CSS. The idea is to blur text and make it appear with a rotation while animating the space between the letters. So, let’s do it. Please note: this is highly experimental and only works as intended in browsers that support the respective CSS properties. The idea is to have a couple of sentences fade in with the aforementioned effect, so we’ll want to wrap every appearing bit into an h2: Remember, this is just a experimental effect; let’s not be too strict with markup best practices :) And the last one?
Creating a Border Animation Effect with SVG and CSS The website of Carl Philipe Brenner has some very creative and subtle animations and today we want to explore how to recreate a border animation effect using CSS transitions on SVG lines. View demo Download source Today we’d like to explore a very subtle, but interesting border animation effect that can be seen on the creative website of Carl Philipe Brenner. When you hover over one of the white portfolio items in the grid, you will see a subtle animation happening: the grid item becomes transparent and the border lines of each side animate clockwise, creating a really nice effect. In this case, the effect is done by animating the widths or heights of several spans with some JS. We’ll try a different approach that uses SVG and CSS transitions. Let’s take a look at the basic concept first, and then we’ll work towards the final effect. Please note that we’ll be using CSS transitions on SVGs which might not be supported in all browsers. The next step is to add the other lines. And that’s it!
Fixed Background Scrolling Layout A fixed background image scrolling layout with 100% height panels and smooth scrolling. View demo Download source A simple scrolling layout with fixed background images using background-attachment: fixed and a navigation. The page will scroll smoothly to the selected section. The HTML <div id="cbp-fbscroller" class="cbp-fbscroller"><nav><a href="#fbsection1" class="cbp-fbcurrent">Section 1</a><a href="#fbsection2">Section 2</a><a href="#fbsection3">Section 3</a><a href="#fbsection4">Section 4</a><a href="#fbsection5">Section 5</a></nav><section id="fbsection1"></section><section id="fbsection2"></section><section id="fbsection3"></section><section id="fbsection4"></section><section id="fbsection5"></section></div> The CSS
"Look Inside" Book Preview with BookBlock A "look inside" book preview with BookBlock. A concept for book showcases or online book stores that shows a grid of books with the options to view the details and to look inside of the book, opening the BookBlock in fullscreen and allowing for a 3D page navigation. View demo Download source There is something really fascinating about (real) books. Please note that this is just a proof-of-concept and might not work properly in older browsers. For the book grid we use figures and this is how it looks: When we click on “view details”, we rotate the book in 3D and move it to the left side, allowing for the details to slide in from the right: Once “look inside” is clicked we perform a series of animations on the book, its cover and the BookBlock. When clicking on one of the navigation arrows, we flip the respective page in 3D and reveal the next ones: Credits We love playing with books in our experiments, so if you’d like to explore some similar articles and demos, check out these ones:
A Collection of Page Transitions A showcase collection of various page transition effects using CSS animations. View demo Download source Today we’d like to share a collection of creative page transitions with you. Please note that this is just for showcasing some interesting effects and for inspiration. The CSS animations are divided into different sets, depending on what they do. Please note: this only works as intended in browsers that support the respective CSS properties. For showcasing the page transitions, we’ve used the following structure: <div id="pt-main" class="pt-perspective"><div class="pt-page pt-page-1"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div><div class="pt-page pt-page-2"></div></div> The perspective container is relative and we add a perspective of 1200px to it. The .pt-page-ontop is used for some of the page transitions where we need one of the pages to stay on top of the other one. I hope you enjoy this and get inspired to build some exciting things!
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.
Vertical Timeline A responsive vertical timeline layout with icons and example media queries. View demo Download source This is a simple responsive timeline with alternating colors for the labels. The HTML <ul class="cbp_tmtimeline"><li><time class="cbp_tmtime" datetime="2013-04-10 18:30"><span>4/10/13</span><span>18:30</span></time><div class="cbp_tmicon cbp_tmicon-phone"></div><div class="cbp_tmlabel"><h2>Ricebean black-eyed pea</h2><p>Winter purslane... The CSS
SVG Icons FTW Despite the growing popularity of SVG, its time around and excellent browser support, we have a lack of good vector icon approaches. It's time to fill this gap and use SVG as icons in our web projects. A lot of great methodologies and principles arose making our CSS more and more modular, structured and flexible. But think about your icons. But fortunately we’ve had icon fonts coming to the rescue. It’s plain text, which means they can be gzipped to up to 95%It’s a vector graphic, which means it can be scaled to any size making it Retina readyIt’s one source file, which means a minimum of HTTP requestsIt’s a font – you can easily change size, color, shape and add a shadowBrowser support for older browsers possible (e.g. Unfortunately, icon fonts have some limitations like being monochrome (still) and we can only use styles for texts like e.g. a text shadow. So today we will explore the possibilities of using SVG icons instead. Using SVG icons Getting started Find this code on Codepen
Applying App Design Concepts to Website Design Should we let app design guide us more in website design? In this article we'll explore how app design concepts can help rethink the planning and design of websites for a better user experience. If you ever look up best practices, design techniques, or trends in application design, you’ll notice something significant: there seems to be a much greater focus on what is most important, that being the user experience, usability, and functionality. We see this stressed every now and then for that in web design too, but how often is it done? Web design should not only be about making things look good, but also about good user experiences and a website’s goals. Most designers probably know this. A Very Well Planned Out Layout If we’re talking about mobile apps or tablet apps, layout is extensively planned out ahead of time — usually to make efficient use of space. The same principle should apply to the Web right? I’m not against pattern libraries. Interactivity & User-Centric Design Mobile First
Techniques for Responsive Typography When it comes to responsive type on the web, there's more to do than just resizing the text's container and having the text reflow inside of it. This in-depth article covers various techniques for making text responsive. One of the most important aspects of responsive web design is responsive typography. When it comes to responsive type on the web, there’s more to do than just resizing the text’s container and having the text reflow inside of it. From choosing a font type and color, to achieving legible font sizes, line heights, and line lengths on different screen sizes, there are several ways to go about achieving fluid and truly responsive text on the web. First Things First: Making text accessible Before getting into techniques to resize text on different screen sizes, you need to make sure that your text is legible and accessible by using sufficient color contrast and an easily readable font to avoid turning your page’s content into an eye sore. Choose A Readable Font Face Resources:
Elastic Stack: Elastic Dragging Interaction ElastiStack is a little script that let's you navigate through a stack of items by dragging away the first one. It comes with an elastic touch meaning that when dragging the top-most item, the other ones will follow as if they were connected elastically. When reaching a certain distance, the dragged item will release itself and the next item will pop out. View demo Download source Today we’d like to share a little script that lets you navigate through a stack of thumbnails with an elastic touch. Three items are visible initially, the main one and the the two next ones, which can be seen because we’ve added some perspective to the item list and translated the two items on the Z-axis. The HTML structure that we are working with is the following: When the first item gets dragged, we’ll want it to bounce back if it’s dropped too close to the stack. And this is how you can initialize the script: The beautiful illustrations used in the demo are by talented artist Guzk.