CSS is a style sheet language, simply speaking with it we make the sites specified element location on the page, and define their appearance. While CSS language is simple and easy to learn, sometimes not easy to cope with it. There is nothing wrong, you can always find obhodnyek solutions in the network, and in this article I want to offer you 10 proven solutions that you can use CSS at registration sites.

If you need to wrap long text automatically level the column width of the table, or show the download progress bar without gifok, read this post completely, I have a solution that can make not only this but also much more.

1. Vertical alignment anything

If you work with CSS, it has repeatedly been wondering how to align text, or any other element vertically within the container unit? Now using CSS3 transformations, you can solve this problem very elegantly.

& Lt ; font > & lt ; font > .verticalcenter {</ font> </ font> <font> </ font> <font> <font>
   The position : relative ; </ font> </ font> <font> < / font> <font> <font>
   top : 50 % ; </ font> </ font> <font> </ font> <font> <font>
   -webkit- the transform : the translateY (- 50 % ); </ font > </ font> <font> </ font> <font> <font>
   -o- the transform : the translateY (- 50 % ); </ font> </ font> <font> </ font> <font> <font >
   the transform : the translateY (- 50 % ); </ font> </ font> <font> </ font> <font> <font>
} </ Font> </ font>

Using this technique, you can vertically align all, one line of text, paragraphs or block content. This solution works and is supported in different browsers. CSS3 Transformations work in Chrome4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9.

2. Stretch the element over the entire height of the window. Element 100% height of the window.

In some cases, you may need to stretch the vertical element to the full height windows. Average change in element size – give him the maximum height of the container in which it is located. To set the height of the block 100% of the window, you must make sure that the height of the very first html and body container is 100%, ie the height of the window.

<font> <font> the html, </ font> </ font> <font> </ font > & lt ; font > & lt ; font > 
body {</ font> </ font> <font> </ font> <font> <font>
   height : 100 % ; </ font> </ font> <font> </ font> <font> <font>
} </ Font> </ font>

Now we use 100% of the height to the desired us to block, like so:

& Lt; font> & lt; font> div {</ font> </ font> <font> </ font> <font> <font> height: 100%; </ font> </ font> <font> < / font> <font> <font >
} </ Font> </ font>

3. Different design for different options – to files, email, or different types of files

Sometimes you have a few links that you want to issue different from other links. To vyizualno leche was to distinguish between them, which the link leads to an external site, which will open the email to send the letter, and which is used to download files. This snippet adds an icon to the link text, and the icon will be different in zavsimosti on n that refers to the reference (to the website, email or file).

& Lt; font> & lt; font> a [href ^ = "http://"] {</ font> </ font> <font> </ font> <font> <font> padding-right: 20 px ; </ font> </ font> <font> </ font> <font> <font>
     background Used : the url (external.gif) the no-repeat The center right; </ font> </ font> <font> </ font > <font> <font>
} </ Font> </ font> <font> </ font> <font> <font>
/ * Emails * / </ font> </ font> <font> </ font > & lt ; font > & lt ; font > 
a [ the href ^ = "the mailto:" ] {</ font> </ font> < font> </ font> <font> <font>
     the padding-right : 20 px ; </ font> </ font> <font> </ font> <font> <font>
     background Used : the url (email.png) no- repeat center right; </ font> </ font> <font> </ font> <font> <font>
} </ Font> </ font> <font> </ font>
  <Font> </ font> <font> <font>
/ * Pdfs * / </ font> </ font> <font> </ font > & lt ; font > & lt ; font > 
a [ the href $ = "pdf." ] {</ Font> </ font> < font> </ font> <font> <font>
     the padding-right : 20 px ; </ font> </ font> <font> </ font> <font> <font>
     background Used : the url (pdf.png) no- repeat center right; </ font> </ font> <font> </ font> <font> <font>
} </ Font> </ font>

4. To make the image black and white

Discoloration of the image in black and white colors can help make your website more stylish and materialistic. This can be done by applying a black and white filter using SVG. That’s what we will do to apply black and white tone:

<font> <font> <Svg the xmlns = "http://www.w3.org/2000/svg" > </ font> </ font> <font> </ font> <font> <font>
  <The Filter id = "grayscale" > </ font> </ font> <font> </ font> <font> <font>
    <FeColorMatrix of the type = "matrix" values = "0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" /> </ font> </ font> <font> </ font> <font> <font>
  </ Filter> </ font> </ font> <font> </ font> <font> <font>
</ Svg> </ font> </ font>

To make this decision a cross-browser, add a CSS property filter:

& Lt ; font > & lt ; font > the img {</ font> </ font> <font> </ font> <font> <font>
     the filter : the url (# filters.svg grayscale); </ font> <font> / * Firefox 3 . 5 + * / </ font> </ font> <font> </ font> <font> <font>
     the filter : gray ; </ font> <font> / * IE 6 - 9 * / </ font> </ font> <font> </ font> <font> <font>
     -webkit- the filter : grayscale ( 1 ); </ font> <font> / * the Google the Chrome, the Safari  6 + & Opera 15 + * / </ font> < / font> <font> </ font> <font> <font>
} </ Font> </ font>

5. The gradient background and animation

One of the most attractive features is the ability to CSS animations. You can animate the background color, opacity, size, but not a gradient. Although it does not directly specify the animation pouluchitsya gradient, you can help this snippet. He moves the position of the background, so that zhto will look like animation.

& Lt ; font > & lt ; font > button {</ font> </ font> <font> </ font> <font> <font>
   background Used-image : linear is-the gradient (# 5187 c 4 , # 1, c 2 f 45 ); </ font> </ font> <font> </ font> <font> <font>
   background Used-size bed : auto  200 % ; </ font> </ font> <font> </ font> <font > <font>
   background Used-The position : 0  100 % ; </ font> </ font> <font> </ font> <font> <font>
   transition : background Used-The position  0 . 5 s ; </ font> </ font > <font> </ font> <font> <font>
} </ Font> </ font> <font> </ font > & lt ; font > & lt ; font > 
button : the hover {</ font> </ font> <font> </ font> <font> <font >
   background Used-The position : 0  0 ; </ font> </ font > <font> </ font> <font> <font>
} </ Font> </ font>

6. Automatic width of columns in a table with CSS

Tables of a headache, especially when it comes to the width of the columns. However, there is a solution that will help us. By adding white-space: nowrapfor each tdwe can easily fix that something like a table wrapping the text inside the cell.

& Lt ; font > & lt ; font > td {</ font> </ font> <font> </ font> <font> <font>
     Communities white-space : nowrap ; </ font> </ font> <font> </ font> <font> < font>
} </ Font> </ font>

7. Box Shadow with only one or two sides

If you want to implement a shadow on one side only, try ispollzovat this code. To implement this solution, first we need to define the container to the desired width and height. Give him a shadow using pseudo-element :after, and play a little with him to give him the correct location. The sample code below will only make the lower shadow.

& Lt ; font > & lt ; font > .box-shadow {</ font> </ font> <font> </ font> <font> <font>
     background Used-color : # the FF 8020 ; </ font> </ font> <font> </ font> <font> <font>
     the width : 160 px ; </ font> </ font> <font> </ font> <font> <font>
     height : 90 px ; </ font> </ font> <font> </ font> <font> <font>
     the margin-top : - 45 px ; </ font> </ font> <font> </ font> <font> <font>
     the margin-left : - 80 px ; </ font> </ font> <font> </ font> <font> <font>
     The position : to absolute ; </ font> </ font> <font> </ font> <font> <font>
     top : 50 % ; </ font> </ font> <font> </ font> <font> <font>
     left : 50 % ; </ font> </ font> <font> </ font> <font> < font>
} </ font> </ font> <font> </ font > & lt ; font > & lt ; font > 
.box-shadow : the after {</ font> </ font> <font> </ font> <font > <font>
     the content : "" ; </ font> </ font> <font> </ font> <font> <font>
     the width : 150 px ; </ font> </ font> <font> </ font> <font> <font>
     height : 1 px ; </ font> </ font> <font> </ font> <font> <font>
     the margin-top : 88 px ; </ font> </ font> <font> </ font> <font> <font>
     the margin-left : - 75 px ; </ font> </ font> <font> </ font> <font> <font>
     the display : block ; </ font> </ font > <font> </ font> <font> <font>
     The position : to absolute ; </ font> </ font> <font> </ font> <font> <font>
     left : 50 % ; </ font> </ font> <font> </ font> <font> <font>
     the z-index : - 1 ; </ font> </ font> <font> </ font> <font> <font>
     -webkit- box-shadow : 0 px  0 px  8 px  2 px # 000000 ; </ font> </ font> <font> </ font> <font> <font>
        -moz- box-shadow : 0 px  0 px  8 px  2 px # 000000 ; </ font> </ font> <font> </ font> <font> <font>
             box-shadow : 0 px  0 px  8 px  2 px # 000000 ; </ font> </ font > <font> </ font > <font> <font>
} </ Font> </ font>

8. Wrap the block with a long text content

To understand why this is necessary srau better look at an example. Let’s say there knteyner ns, width 200px. And in it apart from the usual words have a long link to the site. Surely you know that the long words or in this case, the link – will not be broken down into shifts. Thus, the content will come out beyond the unit.

Fix the bug helps us simple CSS snippet, which will adjust the text size of a container.

& Lt ; font > & lt ; font > the pre {</ font> </ font> <font> </ font> <font> <font>
   Communities white-space : the pre-line ; </ font> </ font> < font> </ font> <font> <font>
   word-wrap : break statement-word ; </ font> </ font> <font> </ font> <font> <font>
} </ Font> </ font>

Here’s how this will now appear in the text of the container:

9. Make a “fuzzy” text

Hotiete add blur to the text? This can be achieved by making the text clear, and adding it to the CSS property text-shadowlike this:

& Lt ; font > & lt ; font > .blurry-text {</ font> </ font> <font> </ font> <font> <font>
    color : transparent ; </ font> </ font> <font > </ font> <font> <font>
    text-shadow : 0  0  5 px the rgba ( 0 , 0 , 0 , 0 . 5 ); </ font> </ font> <font> </ font> <font> <font>
} </ Font> </ font>

“Fuzzy” text is ready!

 

10. Animation dots, using only CSS animations

This example will help to make the animation ellipsis, is often used when you need to display the status of downloads or waiting. Now you can do it in CSS, without using izobradeniya hyphae.

& Lt ; font > & lt ; font > .loading : the after {</ font> </ font> <font> </ font> <font> <font>
     the overflow : hidden ; </ font> </ font> <font > </ font> <font> <font>
     the display : the inline-block ; </ font> </ font> <font> </ font> <font> <font>
     vertical-the align : bottom ; </ font> </ font> <font> </ font> <font> <font>
     the animation : ellipsis  2 s the infinite; </ font> </ font> <font> </ font> <font> <font>
     the content : "\ 2026" ; </ font> <font> / * Ascii code for the ellipsis character * / </ font> </ font> <font> </ font> <font> <font>
} </ font> </ font> <font> </ font > & lt ; font > & lt ; font > 
@ keyframes  ellipsis {</ font> </ font> <font> </ font > & lt ; font > & lt ; font > 
    from {</ font> </ font> <font> </ font> <font> <font>
         the width : 2 px ; </ font> </ font> <font> </ font> <font > <font>
    } </ font> </ font> <font> </ font > & lt ; font > & lt ; font > 
    to {</ font> </ font> <font> </ font> <font> <font>
         the width : 15 px ; </ font> </ font> <font> </ font> <font> <font>
    } </ Font> </ font> <font> </ font> <font> <font>
} </ Font> </ font>
(Visited 48 times, 1 visits today)
adminTips
CSS is a style sheet language, simply speaking with it we make the sites specified element location on the page, and define their appearance. While CSS language is simple and easy to learn, sometimes not easy to cope with it. There is nothing wrong, you can always find obhodnyek...

Do you want to be notified about new DBA updates, releases, jobs and free tips? Join our email newsletter. It's fast and easy. You will be among the first to know about hot new DBA updates and stuff, it will help you enhance your DBA skills.
We take your privacy very seriously