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 CSS tutorial I will show you how to create a heart shaped bokeh CSS effect. You can use the same code to create the CSS bokeh effect with other shapes too. This is the bokeh CSS effect we will make: For the impatient readers: Codepen Heart Shaped Bokeh Gist on Github Heart symbol...
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...
In this short CSS tutorial I will show you how to create some really cool and easy CSS image effects that you can apply to any online image. The image effects I will show you are the most common photo effects that photographers use when developing a photo. I’m a photographer myself, so, I like...
Probably the easiest way to add a triangle in a web page is to simply draw it in an image and add the image to the web page. There are many secrets to drawing the perfect triangle and you can read how to do that in Photoshop in this article: Create A Triangle in Photoshop...
The circle image CSS problem: Images come in rectangle or square shape. You can always use a photo editor like Gimp or Photoshop to crop an image into a circle (if that’s what you want check out this automated action from PhotoshopSupply to Crop An Image Into Any Shape) or even use online tools like...
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...
In this post I will show you how to create a so called planetarium CSS solar system. Basically I will use CSS animations to animate a representation of our solar system. Actually I will only represent the movement of the Moon around the Earth, the rotation of the Earth around its own axis and the revolution...