There may be a simple solution, but I can't seem to figure this out. I'm taking a design I made and turning it into a live site. There is a gradient background and a dark overlay layer for effect. I can't seem to place the content above the overlay.
http://i.stack.imgur.com/Vmtj6.jpg
HTML:
<div class="overlay">
<div class="container main">
{{> yield}}
</div>
</div>
CSS:
html, body {
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
/* Gradient: */
background: #08a8d4;
background: -moz-linear-gradient(45deg, #08a8d4 7%, #04ffc4 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(7%,#08a8d4), color-stop(100%,#04ffc4));
background: -webkit-linear-gradient(45deg, #08a8d4 7%,#04ffc4 100%);
background: -o-linear-gradient(45deg, #08a8d4 7%,#04ffc4 100%);
background: -ms-linear-gradient(45deg, #08a8d4 7%,#04ffc4 100%);
background: linear-gradient(45deg, #08a8d4 7%,#04ffc4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08a8d4', endColorstr='#04ffc4',GradientType=1 );
}
.overlay {
height: 100%;
opacity: 0.26;
background: #535353;
position: relative;
}
.main {
margin-top: 50px;
}
.main h1 {
color: white;
}
change the
.overlay {
height: 100%;
opacity: 0.26;
background: #535353;
position: relative;
}
to
.overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
opacity: 0.26;
background: #535353;
}
Have you tried using the CSS z-index option.
apply a z-index:100 to the content you want raised
you should place your .container.main outside of .overlay and then use position: absolute on either
<div class="overlay">
</div>
<div class="container main">
{{> yield}}
</div>
assign position: absolute on either .overlay or .container and make sure the container of both these two elements has also position property defined
Related
i want to add radial-gradient on an element, it works when i set an image as a background image but not on element. Is there any way to do this, what am trying to achieve here is fade the image from bottom.
*My Code*
<div class="slideBanner">
<img src="/media/{{show.banner}}" style="background: red radial-gradient(ellipse at center, rgba(0,0,0,0) 10%,rgba(0,0,0,1) 90%); background-blend-mode: multiply; width: 500px; height: 500px; z-index: 1;">
</div>
I imagine that your answer is like this codepen-resolve
codepen-image
.slideBanner {
position: relative;
width: 100%;
height: 100%
}
.slideBanner:before {
position: absolute;
content:"";
background: red radial-gradient(ellipse at center, rgba(0,0,0,0) 10%,rgba(0,0,0,1) 90%);
background-blend-mode: multiply; width: 500px; height: 500px;
z-index: 0;
opacity: 0.7;
width: 100%;
height: 100%
}
img {
width: 100%;
height: 100%
}
<div class="slideBanner">
<img src="https://1.bp.blogspot.com/-2hrW2w5l99U/XYuD2fDHydI/AAAAAAAAIKY/Wu_bQmABRL0-lm9LAt3tzs75uKT8S0nhwCKgBGAsYHg/s320/15694239854007711595824302455034.jpg" >
</div>
For a website I'm developing I need to include some diagonal shaped borders to a div. These are the main examples which I need to recreate.
double diagonal top border, triangle shaped
Now been scouting the web on how to achieve this, and my first thought as well would be by using ::before. However I can't get it to work without it being positioned absolute which messes up the entire page.
This is my code I have tried to achieve something like this:
.slider-container{
background-color: $blue;
width: 100%;
overflow: hidden;
position: relative;
.col-md-3{
img{
padding: 40px;
width: 100%;
max-width: 400px;
margin: auto;
}
}
&::before {
background: red;
bottom: 100%;
content: '';
display: block;
height: 100%;
position: absolute;
right: 0;
transform-origin: 100% 100%;
transform: rotate(-15deg);
width: 150%;
}
}
<section id="slider">
<div class="container-fluid">
<div class="row slider-container">
<div class="col-md-3">
<p>imgae 1</p>
</div>
<div class="col-md-3">
<p>imgae 2</p>
</div>
<div class="col-md-3">
<p>imgae 3</p>
</div>
<div class="col-md-3">
<p>imgae 4</p>
</div>
</div>
</div>
</section>
Note: it won't work in here but this is the result I get result
With just css and a bit tweaking based on your divs size you could create something like this:
.myclass {
width: 100px;
height: 100px;
background: linear-gradient(45deg, black 0%, black 26%, transparent 26%), linear-gradient(-45deg, black 0%, black 27%, transparent 27%)
}
.myclass2 {
width: 100px;
height: 100px;
background: linear-gradient(-45deg, blue 0%, blue 27%, transparent 27%), linear-gradient(45deg, blue 0%, blue 26%, red 26%)
}
With transparency:
<div class="myclass">My content here</div>
<br/>
Not as easy with transparent:
<div class="myclass2">My content here</div>
Edit: Just tested this in chrome, you might need special linear-gradients for older/other browsers.
The most simple way to achieve this would probably be to use a background image, though the effect may prove to be inconsistent on smaller devices. For this reason, you may want to consider using a hard-stop gradient.
.grad {
background: lightblue; /* For browsers that don't support gradients */
background: -webkit-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
background: -o-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
background: -moz-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
background: linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
width: 100%;
padding: 20px;
}
<div class="grad">
<h1>Hard-stop gradient</h1>
<p>Using this type of gradient, you can create an angled background without using a background image.</p>
</div>
Using this, you can create a gradient from 0% to 15% that is white on both ends, followed by a gradient from 15% to 100% that's fully black. This completely removes the fading effect, giving you your angled background. It's probably the most efficient way as well since it only requires one line of CSS.
Something like this?
div {
background: yellow;
height: 150px;
overflow: hidden;
position: relative;
width: 300px;
}
div::before {
background: red;
bottom: 100%;
content: '';
display: block;
height: 100%;
position: absolute;
right: 0;
transform-origin: 100% 100%;
transform: rotate(-15deg);
width: 150%;
}
<div></div>
You can use clip-path.
body {
margin: 0;
padding: 0;
color: #ffffff;
}
.wrapper {
min-height: 100vh;
min-width: 100vw;
max-width: 100vw;
width: 100vw;
background-color: red;
}
.bg {
min-height: 100vh;
min-width: 100vw;
background-color: blue;
clip-path: polygon(80% 0, 100% 0, 100% 100%, 50% 100%);
}
<div class="wrapper">
<div class="bg"></div>
</div>
For me, the linear-gradient is not smooth ...
I would suggest either clip-path or svg:
svg {
display: block;
width: 100%;
height: 55px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" fill="white" />
</svg>
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid green;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
EDIT:
The chat window should be aligned to the right, with the chat area within the chat window, like this, why isn't it?: Codepen
Should be this:
I'm looking to make a simple site with a header and a rectangle on the side. For some reason, I cannot position my logo correctly! What I currently have:
html,
body {
background-color: #333;
margin: 0;
padding: 0;
}
#overlay {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.2;
background: #ccc;
background: -webkit-linear-gradient(right top, #8900AB, #282828);
background: -o-linear-gradient(top right, #8900AB, #282828);
background: -moz-linear-gradient(top right, #8900AB, #282828);
background: linear-gradient(to top right, #8900AB, #282828);
}
#header {
position: absolute;
background: #404040;
width: 100%;
height: 10%;
}
#logo {
position: absolute;
background-image: url(http://csgovoid.net/img/logo.png);
background-repeat: no-repeat;
background-size: contain;
}
<html>
<body>
<div id="overlay"></div>
<div id="header">
<div id="logo"></div>
</div>
<div id="Seperator_H01"></div>
<div id="chat_extended">
<div id="chat_area"></div>
<input id="chat_input" type="text" placeholder="Chat...">
<button id="send_button" onClick="send()">SEND</buttton>
</div>
<div id="Seperator_V01"></div>
</body>
</html>
CodePen
What I'm trying to achieve:
(The text input and send button aren't included in the picture.)
It looks like you need to add a width and height :) A div has a height and width of zero by default, and since there is nothing in there you need to set it!
you need to add img tag;
<div id="logo">
<img src="http://csgovoid.net/img/logo.png">
</div>
and add following css:
#logo img{
width:2%;
//background stuff is removed -- not required in this case
}
#chat_extended
{ text-align:center;
padding-top:5%;
}
#header {
position: absolute;
background: #404040;
width: 100%;
//height is removed -- not required
}
Here is a fiddle : https://jsfiddle.net/5odd0q1n/
CSS :
html,
body {
background-color: #333;
margin: 0;
padding: 0;
width:100%;
height:100%;
}
#overlay {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.2;
background: #ccc;
background: -webkit-linear-gradient(right top, #8900AB, #282828);
background: -o-linear-gradient(top right, #8900AB, #282828);
background: -moz-linear-gradient(top right, #8900AB, #282828);
background: linear-gradient(to top right, #8900AB, #282828);
}
#header {
position: absolute;
background: #404040;
width: 100%;
height: 10%;
}
#logo {
position: relative;
background-image: url(http://csgovoid.net/img/logo.png);
background-repeat: no-repeat;
background-size: contain;
height:100%;
}
HTML : (you had a typo in </button>)
<html>
<body>
<div id="overlay"></div>
<div id="header">
<div id="logo"></div>
</div>
<div id="Seperator_H01"></div>
<div id="chat_extended">
<div id="chat_area"></div>
<input id="chat_input" type="text" placeholder="Chat...">
<button id="send_button" onClick="send()">SEND</button>
</div>
<div id="Seperator_V01"></div>
</body>
</html>
Absoulute position is not good for responsivnes becuse you can't get a width or a height relative to parrent using css only :)
Anyways you asked for border line on the header : https://jsfiddle.net/5odd0q1n/3/ (you can find it here)
you only need to add
border-bottom: 10px solid purple ;
to your #header :)
I was wondering if it is possible to create a background effect like in the image below using just one div.
I know how to achieve it with two divs, but my situation would make it really easy if it could be done in one div (maybe using :after ???). The code for the gradients is:
.bg-green {
background-image: linear-gradient(-180deg, #95D428 0%, #20560B 100%);
}
.bg-red {
background-image: linear-gradient(-180deg, #F5515F 0%, #8E0A1E 100%;
}
Thanks :)
Yes, this is possible using a single div with a :pseudo-element.
What you could do is add the second linear-gradient to its :after :pseudo-element. Notice the use of rgba(r, b, g, a) instead of hex colors. This way you could control the opacity of the second linear-gradient by changing its alpha value.
body, html {
height: 100%;
margin: 0;
}
div {
width: 100%;
height: 100%;
position: relative;
background: linear-gradient(110deg, #5EDC29 45%, #FF0058 45%, #FF0058 100%);
z-index: -1;
}
div:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(-180deg, transparent 0%, rgba(0,0,0,0.6) 100%);
}
<div></div>
If you want the exact same gradient colors that you've posted in your question, you'll need clipPath.
body {
background: #222222;
margin: 0;
}
.bg {
width: 500px;
height: 300px;
background: linear-gradient(-180deg, #F5515F 0%, #8E0A1E 100%);
}
.bg-2 {
position: absolute;
width: 500px;
height: 300px;
top: 0;
z-index: -1;
background-image: linear-gradient(-180deg, #95D428 0%, #20560B 100%);
}
<svg width="500" height="300">
<defs>
<clipPath id="shape">
<path d="M300,0 L501,0 L501,301 L175,301z" />
</clipPath>
</defs>
<foreignObject clip-path="url(#shape)" width="500" height="300">
<div class="bg"></div>
</foreignObject>
</svg>
<div class="bg-2"></div>
You can get this effect, but you will need to set overflow hidden on the div and to set the background in a after pseudo class
.test {
width: 400px;
height: 300px;
border: solid 1px black;
position: relative;
overflow: hidden;
}
.test:after {
content: "";
position: absolute;
width: 160%;
height: 160%;
top: -30%;
left: -30%;
background-image: linear-gradient(-210deg, #95D428 0%, #20560B 100%), linear-gradient(-210deg, #F5515F 0%, #8E0A1E 100%);
background-position: top left, top right;
background-size: 50% 100%;
background-repeat: no-repeat;
-webkit-transform: rotate(30deg);
}
<div class="test"></div>
The after is rotated to get the inclined separation. The dimensions need to be bigger so as not to show missing corners.
And then, you assign the 2 linear gradients as 2 separate background-images,inclined an additional 30deg to compensate for the base inclination
I need something like this:
How can achieve this with css? I know that one way is use background image, but can I achieve this only with css without any image?
There is a hacky way to do this, using the :before pseudo element. You give the :before a border, then rotate it with a CSS transform. Doing it this way adds no extra elements to the DOM, and adding/removing the strikethrough is a simple as adding/removing the class.
Here's a demo
Caveats
This will only work down to IE8. IE7 does not support :before, however will degrade gracefully in browsers that do support :before but don't support CSS transforms.
The angle of rotation is fixed. If the text is longer, the line will not touch the corners of the text. Be mindful of this.
CSS
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: inherit;
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transform:rotate(-5deg);
}
HTML
<span class="strikethrough">Deleted text</span>
You can use background linear-gradient with currentColor to avoid hardcoding font color:
.strikediag {
background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
}
.withpadding {
padding: 0 0.15em;
}
The value is <span class="strikediag">2x</span> 3x<br>
The number is <span class="strikediag">1234567890</span>.
<p>
The value is <span class="strikediag withpadding">2x</span>3x<br>
The number is <span class="strikediag withpadding">1234567890</span>.
If you don't need the element to be fully inline, you can use a pseudo element to place the line on top of the element. This way the angle can be adjusted by changing the pseudo element's size:
.strikediag {
display: inline-block;
position: relative;
}
.strikediag::before {
content: '';
position: absolute;
left: -0.1em;
right: -0.1em;
top: 0.38em;
bottom: 0.38em;
background: linear-gradient(to left top, transparent 45.5%, currentColor 47.5%, currentColor 52.5%, transparent 54.5%);
pointer-events: none;
}
The value is <span class="strikediag">2x</span> 3x<br>
The number is <span class="strikediag">1234567890</span>.
del {
position:relative;
text-decoration:none;
}
del::after {
content:"";
position:absolute;
top:50%; left:0; width:100%; height:1px;
background:black;
transform:rotate(-7deg);
}
Enhancing Bojangles answer from above:
.strike-diagonal-price {
position: relative;
background-color: black;
color: white;
}
.strike-diagonal-price:before {
position: absolute;
content: "";
left: 0;
top: 45%;
right: 0;
border-top: 2px solid;
border-color: red;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}
Now I get the affect I needed:
I think you could probably apply a rotation effect to a horizontal rule. Something like:
<html>
<body>
<hr />
123456
</body>
</html>
With the CSS:
hr
{
width: 50px;
position: absolute;
background-color: #000000;
color: #000000;
border-color: #000000;
transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
-moz-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
-o-transform:rotate(-7deg);
}
Fiddle
Your mileage may vary depending on browser and version though, so I'm not sure if I'd resort to this. You might have to pull off some funky VML code to support older versions of IE, for example.
CSS3 gradient
background-image: linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -o-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -moz-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -webkit-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -ms-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -webkit-gradient( linear, left bottom,right top,color-stop(0, rgb(234,20,136)), color-stop(0.5, rgb(255,46,164)), color-stop(0, rgb(255,74,197)) );
My example won't fill your needs perfectly but, for more info and funny tweaks, see http://gradients.glrzad.com/.
What you have to do is create a background-gradient of white-black-white and position your opacity at something like 48% 50% 52%.
This is an old question but as an alternative you can use CSS3 Linear Gradients for example (http://codepen.io/yusuf-azer/pen/ojJLoG).
For extensive explaining and a LESS Solution check
http://www.yusufazer.com/tutorials-how-to/how-to-make-a-diagonal-line-through-with-css3/
span.price--line-through {
background-color: transparent;
background-image: -webkit-gradient(linear, 19.1% -7.9%, 81% 107.9%, color-stop(0, #fff), color-stop(.475, #fff), color-stop(.5, #000), color-stop(.515, #fff), color-stop(1, #fff));
background-image: -webkit-repeating-linear-gradient(287deg, #fff 0%, #fff 47.5%, #000 50%, #fff 51.5%, #fff 100%);
background-image: repeating-linear-gradient(163deg, #fff 0%, #fff 47.5%, #000 50%, #fff 51.5%, #fff 100%);
background-image: -ms-repeating-linear-gradient(287deg, #fff 0%, #fff 47.5%, #000 50%, #fff 51.5%, #fff 100%);
}
I don't think there is a sustainable css solution to this.
My pure CSS solution would be to place another element of text behind your first element of text that is identical in number of characters (characters being ' '), a text-decleration of line-through, and a transform of rotate.
Something like:
<html>
<head>
<style>
.strike{
text-decoration: line-through;
-webkit-transform: rotate(344deg);
-moz-transform: rotate(344deg);
-o-transform: rotate(344deg);}
</style>
</head>
<body>
<p>Text to display</p>
<p class='strike'></p>
</body>
</html>
Text Rotation example
I am looking forward to seeing better answers from other users.
Here is my solution using clip-path, which is responsive also
p{
position : relative
}
span{
position: absolute;
width: 100%;
height: 100%;
color : black;
clip-path: polygon(100% 0 , 100% 12% ,0% 100% , 0% 88%);
}
<p><span/>$100</p>
I did it this way using an SVG in the HTM with a CSS class:
HTML:
<ul>
<li>Regular Price: <div class="zIndex-10a">$4.50</div><div class="zIndex-10b"><svg height="16" width="5"><line x1="0" y1="20" x2="40" y2="0" class="Strike-01a"></svg></div></li>
</ul>
CSS:
/* -- CONTAINS TEXT TO STRIKE ---- */ .zIndex-10a { display: inline-block; position: relative; left: 0px; z-index: 10; }
/* -- CONTAINS SVG LINE IN HTML -- */ .zIndex-10b { display: inline-block; position: relative; right: 40px; z-index: 11; }
/* -- SVG STROKE PROPERTIES ------ */ .Strike-01a { stroke: rgb(255,0,0); stroke-width:2; }
There might be simpler easier ways by now. I just cooked this up in a pinch for my product detail special offer page. Hope it helps someone.
Try
.mydiv {
background-color: #990000;
color: #FFFF00;
font-size: 2em;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 15px;
max-width: 300px;
width: 100%;
}
.strikethrough-100p, .strikethrough-50p{
position: relative;
text-align: center;
}
.strikethrough-100p:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 3px solid;
border-color: inherit;
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transform:rotate(-5deg);
}
.strikethrough-50p:before {
position: absolute;
content: "";
width:50%;
left: 25%;
top: 50%;
right: 0;
border-top: 3px solid;
border-color: inherit;
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transform:rotate(-5deg);
}
<div class="mydiv">
<div class="strikethrough-100p">123456</div>
</div>
<br>
<div class="mydiv">
<div class="strikethrough-50p">123456</div>
</div>
And here's a fancy version:
background:none repeat scroll 0 0 rgba(255, 0, 0, 0.5);
-moz-border-radius:20px 0;
-webkit-border-radius:20px 0;
border-radius:20px 0;
content: "";
height:5px; left:-5%;
position:absolute;
top:30%;
-moz-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
transform:rotate(-7deg);
transform-origin:50% 50% 0;
width:110%;