Gradient boundary element




This article will describe the technique of overlay on the border (frame) of any gradient.

 

The positioning of the element with the gradient

1) On many sites indicated that the property z-index , you can specify both positive and negative values, but in fact the browsers in their own way to implement negative values. Sometimes very unexpectedly.

Variants of the gradient overlay on the border actually, I tried several but settled on one. He's not the most ideal, and even in some browsers (Chrome 33 and less Stock Android 2.3 and less, Firefox for Android), it is buggy.

Why? Because of the above browsers consider that a negative z-index (-1 or less) you need to render at the last turn.

However, it works fine even on the browsers, if the layer with negative z-index , there are no complex items. For example, <video>, <audio>, <embed>, <object>, <canvas> , and others.

For example, I had a situation where I <video> put on the background of the site with a negative z-index, and the top, at a certain volume scroll the page, I get a menu (slideup/slidedown). As a result, the menu is rendered fine, but the video part, or Vice versa menu part, the video is fine (different on different browsers). Removing negative z-index everything is excellent started to work.

2) to stretch an element from any position (except static) you can use both bindings (top bottom / left right). Thus, you specify the offset from the parent and drag the item (of course it needs to be inline). This approach is shown in my DEMO. Almost the same approach positions and limits the size of the modal window with the selection of the user's avatar at the bottom of each article (there are still only added the centering element margin: 0 auto;).

 

The principle perform a gradient border

Actually this is just a pseudo-element (:before/:after) with a gradient fill across the background,

In the DEMO I made 2 vertical gradient (top & bottom), and detect the amount of 50% of the height of the parent. The gradient is made with the generator http://www.colorzilla.com/gradient-editor/

The value of the visible boundary is determined by the offset relative to the parent and sets the value of the properties top, bottom, left, right.

  1. #border-gradient {
  2. height: 300px;
  3. width: 600px;
  4. background-color: azure;
  5. position: relative;
  6. border-radius: 10px;
  7. }
  8. #border-gradient:before,
  9. #border-gradient:after {
  10. content: "";
  11. position: absolute;
  12. left: -1px;
  13. right: -1px;
  14. height: 50%;
  15. padding-top: 1px;
  16. z-index: -1;
  17. }
  18. #border-gradient:before {
  19. top: -1px;
  20. background: -moz-linear-gradient(top, rgba(255,0,4,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
  21. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,0,4,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
  22. background: -webkit-linear-gradient(top, rgba(255,0,4,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
  23. background: -o-linear-gradient(top, rgba(255,0,4,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
  24. background: -ms-linear-gradient(top, rgba(255,0,4,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
  25. background: linear-gradient(to bottom, rgba(255,0,4,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
  26. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0004', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
  27. border-top-left-radius: 12px;
  28. border-top-right-radius: 12px;
  29. }
  30. #border-gradient:after {
  31. bottom: -1px;
  32. background: -moz-linear-gradient(top, rgba(84,0,255,0) 0%, rgba(84,0,255,1) 100%); /* FF3.6+ */
  33. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(84,0,255,0)), color-stop(100%,rgba(84,0,255,1))); /* Chrome,Safari4+ */
  34. background: -webkit-linear-gradient(top, rgba(84,0,255,0) 0%,rgba(84,0,255,1) 100%); /* Chrome10+,Safari5.1+ */
  35. background: -o-linear-gradient(top, rgba(84,0,255,0) 0%,rgba(84,0,255,1) 100%); /* Opera 11.10+ */
  36. background: -ms-linear-gradient(top, rgba(84,0,255,0) 0%,rgba(84,0,255,1) 100%); /* IE10+ */
  37. background: linear-gradient(to bottom, rgba(84,0,255,0) 0%,rgba(84,0,255,1) 100%); /* W3C */
  38. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005400ff', endColorstr='#5400ff',GradientType=0 ); /* IE6-9 */
  39. border-bottom-left-radius: 12px;
  40. border-bottom-right-radius: 12px;
  41. }

 

Well, that's all. See the DEMO at the end of the article.

Live demo
Download ZIP







Found comments - 0






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