CSS Text Formatting
Styling Design Elements: 5 Beautiful Post Headings
We will start a new set of posts that will demonstrate different way of creating and styling various design elements. Today our focus will be on “Post Headings“, how to style and markup this important block that comes before any post.
CSS Drop Shadows
The CSS2 text-shadow property makes it easy to add a drop shadow to a web page’s text, but so far it’s only supported by the Safari browser for OS X. Today we’re going to create CSS drop shadows for other browsers, including Firefox.
Css text-shadow
The aim of this article is to give you a quick introduction of a css property named text-shadow which was first included in CSS2 (but it’s not implemented in all browsers yet). Nevertheless you can make some cool effects with it, which could only be done before by photoshopping text and rendering it as an image.
Background gradients and css
Listed below are a few methods for creating background gradients. I have included a short description in the gradient, along with the HTML and CSS. One way or another it has most browsers covered.
ToolTips: Text Overflow
Sometimes text will have to be clipped. For instance when it overflows the element’s box. When this happens, you want to leave a visual “hint” to the user that text has been clipped. This is were the text-overflow-props come in.
CSS Custom Fonts
Thousand's of fonts are available on the internet today, some are paid some are free to use.Download the font you want to use on your webpage. Then copy the downloaded fonts to your web server and use them on your webpages using CSS.We'll use the free ones for this tutorial.
Gradient Text Effect with CSS
Text Gradient is a simple css trick that allows you to improve your site's appearance by putting gradients on system font titles using nothing but css and a png image.
CSS Gradient Text Effect
Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash).
TEXT ROTATION WITH CSS
Thankfully, many of the popular browsers of today support the ability to rotate HTML elements. Even better? We can make it work in Internet Explorer (back to version 5.5 even). How you might ask? Okay, let's look at the HTML.
CSS Letterpress Effect: Text-Shadow
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. No Photoshop trickery here!
How to make a shadow
Css drop shadow is a Technique which can be implemented on a block element,it's really easy and flexible , we will make it without using any image,so our page won’t be heavy .
Using CSS fonts via Google Font API
Google offer a font API which allows web developers to import web fonts dynamically. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style. The API allows developers to add web fonts to any web page, fonts are open source and the css is cross browser compatible. Below Ill show you how to include fonts into any web page along with CSS examples of the best fonts from the API
GETTING THE TEXT TO WRAP AROUND AN IMAGE USING CSS
In html, this feature is made possible using the align attribute, however this attribute is now deprecated. Css can be used to wrap a text around an image using float feature as shown in the example below:
Free Pretty Web Fonts in 5 Minutes with Google Font API
Learn how to use Google's Font API to install and use nice-looking web fonts in your web pages, in just a few minutes.
clip an image as text background
An interesting way by which a fine visual representation of text can be attained is the masking of the text. This tutorial explains how we can obtain this effect.
CSS Text Properties
This reference lists all the ways you can control the layout of your text using the text properties available in CSS, such as line spacing and text alignment.
CSS Font Properties
In this reference we take a look at setting fonts in your Web page, using the various font properties that can be controlled with style sheets.
How to use white-space property
One of the least known aspects of CSS is that relative to the management of white spaces inside a text. Often there is the necessity for having a greater control over text formatting compared to that predefined by the browser. In this pill you will learn about how to use the interesting white-space property, in order to give a touch of originality to your works.
white-space property
CSS has a pretty useful property called white-space that usually unnoticed among CSS beginners. This tutorial describes the different values and usage of CSS white-space property.