Archive for the ‘CSS’ Category
Gradient-filled colorful boxes – in CSS
Want to make a nice gradient colored box without using ugly background images? Just apply this set of rules to any element, like DIV:
background-color: #00FF00;
background-image: -moz-linear-gradient(top, #00FF00, #FFFF00); /* Firefox */
background-image: -ms-linear-gradient(top, #00FF00, #FFFF00); /* IE10 */
background-image: -o-linear-gradient(top, #00FF00, #FFFF00); /* Opera */
background-image: -webkit-gradient(linear, left top, left bottom, from(#00FF00), to(#FFFF00)); /* Safari/Chrome */
background-image: -webkit-linear-gradient(top, [...]
Rotating elements in CSS aka How to make diagonal line in CSS
If you want to make a diagonal line in CSS you can just draw a rectangle with height so small it’s almost a line and then rotate it a bit.
Google Web Fonts- set of free fonts to use on any website
Here’s a nice alternative to TypeKit. It’s free no matter how many visitor you have on your website, you can use an API or just download the fonts and use @font-face to embed them on your website. You can also download and install them in your OS and use in graphic editors to make nice headers or whatever you need!
How to make a circle or elipsis in pure CSS?
Why would one want to make a circle or elipsis in just pure CSS? Because you can easily change the color and size using CSS and it looks great even when upscaled!
And how to do it, well, it’s extremely simple- let’s create a small rectangle:
<div style=”width:70px; height:50px; background-color: red”></div>
and then let’s add rounded corners to [...]
How to make a triangle in pure CSS?
In this post I’ll show you a trick to draw triangles in pure CSS. Why should you want to draw triangles in CSS instead of using images? Because CSS needs less bytes, it’s easier to modify colors and size and it can be enlarged easily (which would lead to horrible pixelation when using images).
First we should understand the method behind this trick, so- everything is based on drawing rectangles with big border.
Typekit- another way to use nonstandard fonts on a website
I already described cufon method so now I want to focus on another method- Typekit.
Typekit.com is a website which lets you use over 500 nonstandard, nonwebsafe fonts. If you have a website with less then 25000 pageviews per month then you can use they services for free.
How to remove dotted border from links in Firefox?
I once came across a weird dotted border around my menu items which appeared in Firefox when item was clicked…
How to style HTML file upload with CSS?
Styling <input type=”file”> is problematic, because most of the browsers don’t apply any styling to it.
But there is a nice hack, which works in major browser (including Firefox and Internet Explorer).
You just need to place a span, and in that space- nice looking text field which will imitate upload field and then the right upload [...]
CSS: how to wrap words (and break if needed)
Imagine you have a nice, big table with just a few columns. In those columns you display data from database. Let’s say one of the columns is for URL. URLs can be really long and browsers don’t like breaking words, so you are most likely to get a hell wide table, unless…
How to make a WYSIWYG editor in Javascript
In this post I will show you a very simple WYSIWYG editor I wrote. Basically speaking all the WYSIWYG functions are done by the browser (not by JS). JS is needed only to control what should be done.
Different browsers support different set of functions.
