Cunning use of CSS




This article will describe the techniques of displacement and hiding elements with CSS, under certain conditions, as well as some features of the behavior of the blocks, and selectors.

 

The offset margin-top block-heir

For the next example let's take 3 of the block (the block with the class pink-block inside a block with a class of gray-block)

  1. .green-block {
  2. height: 100px;
  3. width: 150px;
  4. background-color: green;
  5. }
  6. .gray-block {
  7. height: 100px;
  8. width: 120px;
  9. background-color: gray;
  10. }
  11. .pink-block {
  12. height: 50px;
  13. width: 50px;
  14. background-color: pink;
  15. }

To begin with, that often have to do a negative margin-top of an heir, and he begins to shift parent. For example,

  1. #margin-1 .pink-block {
  2. margin-top: -30px;
  3. }

 

Solution # 1

You need to block with class pink-block to use the property position: relative. And offset do not already property of margin-top, but just top.

  1. #margin-2 .pink-block {
  2. position: relative;
  3. top: -30px;
  4. }

Due to the fact that it is not always possible to apply position: relative, I found another solution.

 

Solution # 2

To margin-top to work correctly on the block with the class pink-block, it is necessary to block the parent add property padding-top, with more than 0px.

Please note that due to the properties padding-top, to change the block size with the class of gray-block (don't forget to add property box-sizing: border-box) and the indentation of margin-top.

  1. #margin-3 .pink-block {
  2. margin-top: -31px;
  3. }
  4. #margin-3 .gray-block {
  5. padding-top: 1px;
  6. box-sizing: border-box;
  7. }

 

A hole in the block

Sometimes it is necessary to make transparent in the block area, there are 2 solutions to this problem.

In the Demo to the article, in the background I wrote the lyrics and added the offset blocks on mouse over.

First let's create the blocks.

  1. #hole-block-1,
  2. #hole-block-2 {
  3. height: 200px;
  4. width: 200px;
  5. border: 2px solid black;
  6. overflow: hidden;
  7. transition: margin .3s;
  8. }
  9. #hole-block-1:hover,
  10. #hole-block-2:hover {
  11. margin-left: 50px;
  12. }
  13. #hole-block-1:before,
  14. #hole-block-2:before {
  15. content: "";
  16. display: block;
  17. height: 150px;
  18. width: 80px;
  19. margin: 25px auto;
  20. border-radius: 100%;
  21. }

It is important these elements include the property overflow: hidden.

 

Solution # 1

The pseudo-element :before asking a shadow box-shadow, the size of which is larger than the size of the parent element. I asked 100px. Under the shadow element will not. So we get the transparent area.

  1. #hole-block-1:before {
  2. box-shadow: 0 0 0 100px gray;
  3. transition: box-shadow .3s;
  4. }
  5. #hole-block-1:hover:before {
  6. box-shadow: 0 0 0 100px green;
  7. }

Feature: for smooth color change shade to a property transition, it is necessary to change all property box-shadow, which is not always convenient.

 

Solution # 2

To fill the block of color, I don't use box-shadowand border. For smooth change of color, change the border-color.

It is important to remember that the property border to resize the block, so it should be positioned. In the example I'm doing this property margin.

  1. #hole-block-2:before {
  2. margin: -70px -40px;
  3. border: 100px solid gray;
  4. transition: border-color .3s;
  5. }
  6. #hole-block-2:hover:before {
  7. border-color: green;
  8. }

 

Application features selectors

 

Hide blocks with invalid attributes

If you are not sure that in the final HTML page will get a link to a picture (or attribute alt), and would not want to see the icon that the image failed to load, you can use the following CSS selectors:

  1. img[src=""],
  2. img[alt=""] {
  3. display: none;
  4. }

 

Automatically add parentheses to the text, if there is no text, the brackets don't show

  1. .quotes:empty {
  2. display: none;
  3. }
  4. .quotes:before,
  5. .quotes:after {
  6. content: "( ";
  7. position: relative;
  8. }
  9. .quotes:after {
  10. content: " )";
  11. }

Instead of the brackets can be any other text or symbols. Including quotes (don't forget to screen).

 

Filtration guidance on the elements inside another element

Sometimes it is necessary to track the mouse on the part of the lens. It is used for pop-up messages when it is not important whether it mouseover.

  1. #hover-block {
  2. height: 200px;
  3. width: 200px;
  4. padding: 20px;
  5. text-align: center;
  6. background-color: gray;
  7. }
  8. #hover-block > div {
  9. display: block;
  10. height: 50px;
  11. width: 100px;
  12. margin: 20px auto;
  13. font-size: 30px;
  14. color: #fff;
  15. background-color: black;
  16. }
  17. #hover-block > span {
  18. display: inline-block;
  19. height: 45px;
  20. width: 100px;
  21. background-color: pink;
  22. transition: background-color .3s;
  23. }
  24. #hover-block:hover > div:not(:hover) ~ span {
  25. background-color: green;
  26. }

Live demo
Download ZIP







Found comments - 1






Кудяблик December 02, 2015
Полезно!
Current text is converted to a smiley
:) :( :0 :@ :# :$ :? :] :[ :} :{ :k :p :x :| :Q :O :S :D :X :C :-) :-( :-0 :-# :-$ :-? :-] :-[ :-} :-{ :-o :-p :-x :-| :-Q :-O :-S :-D :-X :-C :-* :-r :-t :-i :-s :-j :-k :-l :-z :-\ :-/ :-I :-J :-K :-L :-Z ;) ;] ;} ;-) ;-] ;-} =) =( =0 =@ =# =$ =? =] =[ =} ={ =o =p =x =| =Q =O =S =D =X =C
:)

Designer avatar

Gender
Hairs/Hats Mouth
Eyes Glasses
Result