Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

Wednesday, October 22, 2014

30 CSS3 Text Effects


1. How to Create Inset Text With CSS3

Inset-css3-text-effect-tutorials
In this tutorial you are going to use the text-shadow property that is currently supported by most of the major browsers to create the appearance of inset text. Inset text being text that has been pushed into the background, almost like a reverse embossed effect.

2. 3D Text

3d-css3-text-effect-tutorials
This is an example of 3D text created merely with CSS3. Use multiple text-shadows to create 3D text on any HTML element.
No extra HTML, no extra headaches, just awesomesauce.

3. Cool Text Effects Using CSS3 Text-Shadow

Shadow-css3-text-effect-tutorials
This tutorial shows you how to create some really cool and inspiring text effects using text shadows in CSS3.

4. Letterpress Effect with CSS Text-Shadow

Pure-letterpress-css3-text-effect-tutorials
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS.

5. Letterpress Text Effect Using Photoshop and CSS

Letterpress-photoshop-css3-text-effect-tutorials

Letterpress effect looks good in modern websites, letterpress effect can be gain using Photoshop and also using text-shadow property of CSS. This tutorial will show you how to achieve letterpress effect with Photoshop and also with pure CSS.

6. Text Embossing Technique With CSS

Text-embossing-css3-text-effect-tutorials

Text embossing has become a huge trend in last couple of years. This tutorial describes how to implement this effect with CSS.

7. Subtle CSS3 Typography that you’d Swear was Made in Photoshop

Subtle-typography-css3-text-effect-tutorials
Learn to use CSS3 text shadows, outlines, transitions, and even text gradients to create cool typography that you’d swear had to be made with a program like Photoshop.

8. Outline Your Text Using the CSS3 text-stroke Property

Outline-css3-text-effect-tutorials
This tutorial shows you how to add an outline, or stroke, to your text using the CSS3 text-stroke property.

9. How to Create a Cool Anaglyphic Text Effect with CSS

Cool-anaglyphic-css3-text-effect-tutorials
In this tutorial you’ll create a cool transparency overlay effect that closely resembles anaglyph stereoscopic 3D images. To use the effect in  web designs you’ll of course build it with CSS, but the main consideration is to keep everything neat and true in our markup.

10. CSS3 Tutorial: How To Change Default Text Selection Colour

Change-selection-color-css3-text-effect-tutorials
Whilst this CSS3 declaration might not be crucial to your project or design and is not supported by all browsers, it’s a fantastic effect that really takes your design one step further.

11. 8 CSS3 Text Shadow Effects

Shadow-cool-css3-text-effect-tutorials
This post covers eight cool text effects you can achieve using CSS3 text-shadow property only .

12. Text Rotation with CSS

Rotate-css3-text-effect-tutorials
In this tutorial you’ll learn to rotate text without images using the transform property.

13. CSS3 Shining Text, CSS2 Flaming Text

Shining-css3-text-effect-tutorials
Create a fun flaming text effect simply by using some JavaScript and the good old CSS2 property text-shadow and shining text using CSS3 properties and animation.

14. Create Beautiful CSS3 Typography

Beautiful-typography-css3-text-effect-tutorials
This tutorial will teach you how to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3. There are no images or other external resources, just pure CSS magic.

15. CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste

Cookbook-css3-text-effect-tutorials
In this tutorial you’ll find seven fun and attractive CSS tricks that you can grab and insert right into your own projects and customize at will. Keep in mind that since this stuff is still cutting edge, older browsers won’t support most of it.

16. 3D Text Hover

3d-hover-css3-text-effect-tutorials
Learn how to create multiple text shadows using CSS3 text shadow property.

17. Adding Stroke to Web Text

Stroke-css3-text-effect-tutorials
Replace programs like Adobe Illustrator and learn how to add stroke to web texts using WebKit.

18. CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript?

Shadow-ie-css3-text-effect-tutorials
IE9 does support the majority of the CSS3 properties, however it doesn’t support image-border and text-shadow properties. This article will deal with text-shadow: how it works in browsers that support it, and strategies developers can use today to emulate some of its functionality in IE.

19. I Heart Blur

Blur-css3-text-effect-tutorials

It ain’t exactly a tutorial, however you should check out the code used to create this stunning effect to learn how to add blur to text without using bunch of text-shadow properties.

20. How to Create Inset Typography with CSS3

Inset-typography-css3-text-effect-tutorials
In this tutorial, you’ll learn to create inset type, a popular text treatment, using only CSS.

21. Quick Tip: Pure CSS Text Gradients 

Pure-gradients-css3-text-effect-tutorials
In this short video tutorial you’ll learn how to apply gradients to texts using webkit.

22. CSS3 Background-Clip: Text

Selectable-css3-text-effect-tutorials
Learn to apply CSS transition on a selectable text.

23. How to Use Text Shadow /w CSS3

Shadow-use-css3-text-effect-tutorials
CSS3 presents many new possibilities when it comes to text effects on websites. The text-shadow property is one of these awesome abilities. This article covers 5 great effects you can achieve using CSS3 text-shadow.

24. CSS3 Poster With No Images

Poster-css3-text-effect-tutorials
An experiment showing the power of CSS3 techniques. This one uses lovely bits like box-shadow, border-radius, @font-face, transform, box-sizing, text-shadow, RGBa. You can check out the code to discover these impressive features.

25. Creating a True Inset Text Effect Using CSS3

Inset-text-css3-text-effect-tutorials
This inset text tutorial differs from others because besides default text-shadow it also uses inner shadow property.

26. 3D CSS Shadow Text Tutorial

3d-shadow-text-effect-tutorials
This easy CSS text shadow tutorial will show you step by step how to create 3D font with multiple css shadows by stacking multiple CSS3 text shadow properties, then go a step further and use the CSS text transform and CSS transition properties to make the 3D text pop out / zoom on hover.

27. How To Create 3D Text Using CSS3

3d-using-text-effect-tutorials
Learn how we create 3D text using CSS3 text-shadow to heading and paragraph tags.

28. Font Sizing With Rem

Font-sizing-text-effect-tutorials
CSS3 introduces a few new units in font sizing, including the rem unit, which stands for “root em”. Take a look at it’s features and learn how to create resizable text in all major browsers.

29. Create Attractive Web Typography with CSS3 and Lettering.js

Attractive-web-typography-css3-text-effect-tutorials
In this tutorial, you’ll look at how to take basic markup and transform it into an attractive typographical design using only minimum images, pure CSS3 magic and we will spice things up with lettering.js – a jQuery plugin for radical web typography.

30. CSS Text Shadow

Shadow-2-css3-text-effect-tutorials

Another tutorial taking you through all the advantages CSS3 text-shadow can give.

CSS & Parallax effects

The idea of a parallax effect is to make it so the background is moving at a different speed then the foreground. There are many different ways to do this.  One of the most common ways to do this is using jQuery and JavaScript.  But it is possible to do it only using CSS.

Here is a list of different sites that have tutorials on how to create that parallax effect. These are great and will give you a lot of very useful information.  But I think I found a tutorial that is MUCH easier to work with and only uses CSS.

http://keithclark.co.uk/articles/pure-css-parallax-websites/

In this tutorial Keith demonstrates how to use CSS transforms, perspective and some scaling trickery to create a pure CSS parallax scrolling website. If I had to choose one to use, it would be this one ...

PARALLAX SLIDER WITH JQUERY

parallax_slider

Building a Parallax Scrolling Storytelling Framework

Parallax-Scrolling-Tutorials-2

FLUID CSS3 SLIDESHOW WITH PARALLAX EFFECT

Parallax-Scrolling-Tutorials-3

PARALLAX CONTENT SLIDER WITH CSS3 AND JQUERY

Parallax-Scrolling-Tutorials-4

Simple Parallax Effect Tutorial

Tutorial || Demo
Parallax-Scrolling-Tutorials-5

Parallax Effect

Parallax-Scrolling-Tutorials-6

Parallax scrolling website interfaces

Parallax-Scrolling-Tutorials-7

Create a Funky Parallax Background Effect Using jQuery

Parallax-Scrolling-Tutorials-8

Scrolling Parallax

Tutorial || Demo
Parallax-Scrolling-Tutorials-9

A Simple Parallax Scrolling Technique

Parallax-Scrolling-Tutorials-10

Create a Parallax Scrolling Website Using Stellar.js

Parallax-Scrolling-Tutorials-11

One Page Website, Vertical Parallax

Parallax-Scrolling-Tutorials-12

The parallax effects with jQuery

Parallax-Scrolling-Tutorials-13

JQUERY PARALLAX – ANIMATED HEADER

Parallax-Scrolling-Tutorials-14

Super Easy Parallax Effect with jQuery

Tutorial || Demo
Parallax-Scrolling-Tutorials-15

Wednesday, October 15, 2014

Reference Tutorials & Articles

Reference Tutorials & Articles 

Breaking the Ice:

Reading:

Beginner's Guide to Responsive Web Design
How to Turn Any Site into a Responsive Site
Responsive Web Design in 3 Steps
Designing for a Responsive Web

Video/Tutorials

Introduction to Responsive Web Design
Responsive Web Design: A visual Guide
     Source Files

Start Building


Creating a Mobile-First Responsive Web Design
Fluid Grids
Fluid Images
Scalable Navigation Patters in Responsive Web Design
Responsive Web Design with CSS3 Media Queries
CSS Effect: Space Images Out to Match Text Height
Adaptive Layouts with Media Queries
Responsive Images: Experimenting with Context-aware Image Sizing
How to Create a Responsive Website Navigation
Design & Code a cool iPhone app website in HTML5
Effective Design for Multiple Screen Sizes

Do More:


Elastic Videos
Hiding and Revealing Portions of Images
Responsive Content Navigator with CSS3
Create a Responsive Web Design Template
Responsive Horizontal Layout
Convert a Menu to a DropDown for Small Screens
Flexible Slide-to-Top Accordion
How to Use CSS3 Orientation Media Queries
Responsive Data Tables
Fluid CSS3 Slideshow with Parallax Effect
How to Build a Responsive Thumbnail Gallery
Optimizing Your E-mail for Mobile Devices
Building a Responsive Resume
A Guide to Using Pictograms in Mobile Applications