Here’s the deal: Plain text is dull. Sure, you can make a text more interesting by changing the text color or choosing a fancy font face (for example, check out this list on MockoFun with +50 free Christmas fonts that you can use online). But, what if you want more? You can easily make text...
This tutorial breaks down how to create a CSS dotted pattern using SVG to achieve a halftone dotted CSS background. Halftoning is a reprographic technique that simulates continuous-tone imagery through the use of a dotted grid background, varying in size or spacing to generate a gradient-like effect. We’ll create this dot background CSS effect by...
When you’ve been building web applications for over 25 years like I have, using HTML, CSS, and JavaScript becomes second nature. In this article, I’ll show you some simple ways to create scrolling text using these tools. Whether you’re just starting out or looking to add a neat effect to your site, there’s a method...
Creating Gradient Text with HTML and CSS In some of my previous articles I’ve shown you how to create cool CSS image effects. Designers and developers are always looking for new and creative ways to make their websites stand out. One way to add some visual interest to your website is by using gradient text....
CSS star shapes can be made using very basic CSS code. Making a CSS star shape is very useful for a number of purposes from making a CSS star rating system, to paragraph dividers, bullet list decorators, star icons and more. In this short article I will show you give you all the tools and...
SVG filters are a very powerful, but a bit obscure tool. You can reference SVG filters from CSS and you can even combine multiple SVG filters. In this post I’ve used SVG filters and 80s fonts to create a few 80s text effects. You can find the source code for each of the 80s font...
In this article I will share the CSS & JS code to generate circle text from a HTML text element. This technique makes a span element for each letter and rotates it slightly. You can generate a circle text by adjusting the font site and circle radius. Similar techniques have been implemented in online web...
In this tutorial I will show you how to create the stroke text CSS effect. Before we go into the HTML and CSS code, if you only need to create a stroke text image, check out this tutorial and learn how to outline text in Photoshop. Or, if you don’t have Photoshop, you can use...
So, How Do You Highlight Text In CSS and HTML? In this short tutorial I will show you several cool ways in which you can use CSS to highlight text. Just like on paper, you highlight text in a HTML page to draw attention to important sections, paragraphs or group or words. On paper you...
Creating a simple glossy button with CSS is quite easy and you only need to know a few CSS tricks. In this post I will show you how to create a glossy button out of an anchor tag using only CSS. At the end of the post you can find the live demo for these...