A directory of resources inthe field of technical communication.


18 found.

About this Site | Advanced Search | Localization | Site Maps



Animated Web Banners With CSS3

Firefox and WebKit browsers are currently the only browsers that support CSS animation, but we’ll take a look at how we can easily make these ads also function in other browsers (which I’ll affectionately refer to as 18th century browsers). However, don’t expect perfect support for all browsers (specifically IE 7 and lower) when experimenting with modern CSS techniques.

Jacob, Caleb. Codrops (2012). Design>Web Design>Multimedia>CSS


Blueprint: Google Grid Gallery

This Blueprint is a responsive grid gallery based on the gallery by Google for the Chromebook Getting Started guide. In this Blueprint we use Masonry for the grid and 3D transforms for navigating the items. For smaller screens we have some example media queries that adjust the grid layout and also the gallery view. In the gallery view, the arrow keys can be used to navigate and the view can be closed using the “Esc” key.

Lou, Mary. Codrops (2014). Design>Web Design>Interaction Design>Graphic Design


Blueprint: Responsive Full Width Tabs

A full width tab component with some example media queries for adjusting the icons of the tabs and the content layout. The main idea is to show only icons for the mobile view and allow the text to appear when there’s enough space. The content columns and the containing media boxes have three different layouts.

Lou, Mary. Codrops (2014). Design>Web Design>Interaction Design>Responsive


Fresh and Creative Web Design Techniques

Space, peachy colors, big and real images and movement will top designer’s to-do lists this year.

Gaines, Kendra. Codrops (2013). Articles>Web Design>Graphic Design


Fullscreen Form Interface

Today we’d like to share a fullscreen form concept with you. The idea is to extend the minimal form concept and only show one question or form field at a time in fullscreen. The user can enter data in a distraction-free way and it allows to add some fancy animations for the fields. Once all the fields have been filled or moved through, we show a summary in the final step. Here the input data can still be reviewed and corrected. In this final step the form can also be submitted.

Lou, Mary. Codrops (2014). Design>Web Design>Forms


A Great UI is Invisible

A user interface that is invisible and that provides seamless interaction possibilities will help the user focus on their goals and direct them to what they need.

Cox, Patrick. Codrops (2013). Articles>User Interface>User Experience>User Centered Design


Halcyon Days: One Page Website Template

A creative one page portfolio template exclusively made for Codrops readers by Peter Finlan. It's especially fitting for a portfolio or start-up website.

Finlan, Peter. Codrops (2014). Resources>Web Design>Portfolios>Responsive


Ideas for Subtle Hover Effects

It’s time for some fresh hover effect inspiration! Nowadays we are seeing a lot of delicate designs with fine lines, lots of white space, clean typography and subtle effects. With that beautiful trend in mind we want to share some creative ideas for grid item hover effects. It’s all about being subtle with that little delightful surprise. The techniques we are using for these hover effects involve 3D transforms and some pseudo-element transitions. Note that these will only work in modern browsers.

Lou, Mary. Codrops (2014). Design>Web Design>Interaction Design>Hypertext


Image Techniques for Creating Depth in Web Design

We live in a three-dimensional world, something that designers are trying to recreate in web design every day. The element of depth can add a greater touch of reality to certain design projects. Creating it can be easier than you think. The key to simulating reality on the 2D screen is by creating depth using images. This can be accomplished in a variety of ways, from the photography itself, to layering of images, manipulation and the use of special effects.

Cousins, Carrie. Codrops (2013). Articles>Graphic Design>Web Design


Inspiration for Article Intro Effects

Today we want to share some inspiration for article intro effects with you. You have surely seen some interesting article headers, usually containing a fullscreen image, that have some sort of intro effect, i.e. where some creative transition happens when scrolling or when clicking on a button to continue. We wanted to explore the effect possibilities with fullscreen images and making something happen when continuing to the article body. There are many potentially cool effects and today we want to share just a couple of ideas with you.

Lou, Mary. Codrops (2014). Design>Web Design>Interaction Design>CSS


Inspiration for Item Transitions

Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background. State transitions are done using CSS Animations.

Lou, Mary. Codrops (2014). Design>Web Design>Interaction Design


Making SVGs Responsive with CSS

An article on how to make embedded SVGs cross-browser responsive. We're going to cover embedding techniques, how to apply the "Padding Hack" and how to use inline media queries to make SVGs adaptive.

Soueidan, Sara. Codrops (2014). Articles>Web Design>Graphic Design>Responsive


Page Preloading Effect

A tutorial on how to re-create the page preloading effect seen on the website of Fontface Ninja. We are going to use CSS animations, 3D transforms and SVGs.

Lou, Mary. Codrops (2014). Design>Web Design>Interaction Design


Recreating the "Design Samsung" Grid Loading Effect

If you already come across the Samsung Corporate Design Center, you certainly have noticed the stylish grid loading effect. The colored background of an item slides in first and when it slides out again to the opposite side, the image is revealed. The color of the sliding element represents the image, i.e. it is colored in the dominant color of the picture. This is a great grid loading effect and after we got a request on how to achieve this, we’d like to show you how to recreate this effect using a Masonry grid with CSS animations. We’ll also make use of the ColorFinder script by pieroxy that will get the most prominent color of an image for us.

Lou, Mary. Codrops (2014). Design>Web Design>Interaction Design>CSS


So, You're a Web Designer, Right?

What is the role of a web designer nowadays? An article about the changes that came with the awareness of responsive web design and the new workflow of designing in the browser.

Molero, Gorka. Codrops (2013). Articles>Web Design>Professionalism


Techniques for Responsive Typography

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.

Soueidan, Sara. Codrops (2013). Articles>Web Design>Typography>Responsive


Tilted Content Slideshow

The FWA landing page has a really nice content slider that plays with 3D perspective on screenshots and animates them in an interesting way. Today we’d like to recreate part of that effect and make a simple content slideshow with some fancy 3D animations. The slideshow won’t be the same as the one on the FWA page: the items won’t be “floating” or moving on hover and we’ll only have a simple navigation.

Lou, Mary. Codrops (2014). Design>Web Design>Interaction Design


Troubleshooting CSS

Sometimes CSS can be frustrating. Learn about some tricky properties, the common issues they can cause and how to solve them.

Giraudel, Hugo. Codrops (2013). Articles>Web Design>CSS

Follow us on: TwitterFacebookRSSPost about us on: TwitterFacebookDeliciousRSSStumbleUpon