I'm attempting to add an SVG pattern to the bottom border of my DIV element. The approach i've taken is not working. Here is the code so far.. This is where I created the SVG pattern. Lastly this is i'm trying to create in CSS.
HTML
<div class="pattern">
hello
</div>
CSS
.pattern{
color:white;
width: 500px;
height: 500px;
border-image:url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAP0lEQVQYV2P8////f0ZGRkYGAgCsgBjFcJMIKUaxEp9iDLfhUoxVIcjd6B7E6Vt0k/EGC7JiguEHU0xQISycASOfKAejj1tDAAAAAElFTkSuQmCC
)repeat;
}
You could perhaps use the :after pseudo element to create the same effect:
.pattern{
color:white;
width: 500px;
height: 500px;
position: relative;
top: 0;
left: 0;
}
.pattern:after{
content: "";
display: block;
height: 8px;
width: 100%;
background-image:url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAP0lEQVQYV2P8////f0ZGRkYGAgCsgBjFcJMIKUaxEp9iDLfhUoxVIcjd6B7E6Vt0k/EGC7JiguEHU0xQISycASOfKAejj1tDAAAAAElFTkSuQmCC
);
position: absolute;
bottom: 0;
left: 0;
}
Related
I want to add a transparent black overlay over an img tag with some text in it, like in the example screenshot below. Ideally only with HTML and CSS.
I have been searching for hours and can't find anything.
I know this could be easily done if the image is used as a background, but this isn't an option for us (SEO reasons).
That shouldn't be so bad. Would something like this work? First some HTML:
#container {
position: relative;
width: 600px;
height: 400px;
}
#someimg {
postion: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#overlay {
position: absolute;
top: 0;
left: 0;
clear: float;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
}
<html>
<body>
<div id="container">
<img id="someimg" src="https://www.w3schools.com/w3images/fjords.jpg"</img>
<div id="overlay">This is some text in an overlay</div>
</div>
</body>
</html>
Mic.com used the following code:
.article-card-8col__overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: -webkit-linear-gradient(top,transparent,rgba(0,0,0,.9));
background: linear-gradient(to bottom,transparent,rgba(0,0,0,.9));
}
I changed it slightly. You could also use their code with on a sibling div element of the image & the parent having position: relative; or use one like mine.
.wrapper {
position: relative;
display: inline-block;
}
.wrapper:after{
content: "";
background: -webkit-linear-gradient(transparent,rgba(0,0,0,.9));
background: linear-gradient(transparent,rgba(0,0,0,.9));
position: absolute;
display: block;
width: 100%;
top: 0;
bottom: 0;
}
<div class="wrapper">
<img src="https://thumbs.mic.com/MTAxZmJlOGIyMSMvYzNOMU1wRTJjMEdyWUZySS1UVjNnMV9LVkZRPS8xMngyNzM6NDk4MHgyODA5LzgwMHg0NTAvZmlsdGVyczpmb3JtYXQoanBlZyk6cXVhbGl0eSg4MCkvaHR0cHM6Ly9zMy5hbWF6b25hd3MuY29tL3BvbGljeW1pYy1pbWFnZXMvanQwY2dmZXZ5aW10aGhqZzBtYXc4cHZxNndrZmdwbmNqNzQzeTB4YmhybWtyOGc0YXYxcHVidWVldzU0OWIwcC5qcGc.jpg" />
</div>
I want my content from &:before and &:after appear outside my div.first and before and after.
I thought the best way is using the css above, but it still appears inside my div, am I using the wrong method or is it something else?
Jsfiddle: https://jsfiddle.net/1uuL3sf6/1/
HTML
<div class="first">
</div>
CSS
.first
{
width: 100%;
height: 500px;
background-color:red;
&:before
{
content:"before";
width: 100%;
height: 20px;
}
&:after
{
content:"after";
width: 100%;
height:20px;
}
}
The pseudo elements :before and after do not create content before and after their parent element. They are inserted before and after its actual content.
A pseudo-element does exactly what the word implies. It creates a phoney element and inserts it before or after the content of the element that you’ve targeted.
From "Learning To Use The :before And :after Pseudo-Elements In CSS"
That's why they are always displayed inside the box of their parent.
However, as an example you can use absolute positioning to move the pseudo element out of the box:
&:before {
content:"before";
position: absolute;
top: -20px;
width: 100%;
height: 20px;
}
But you can also float them or display them as block to achieve your desired result.
Demo
Try before buy
.first {
width: 100%;
height: 500px;
background-color:red;
}
.first::before
{
content:"before";
}
.first::after
{
content:"after";
}
<div class="first">
</ br> This is your first div. </ br>
</div>
Here is a solution: https://jsfiddle.net/e8qtoxL9/
.first
{
width: 200px;
height: 200px;
margin: 0 auto;
background-color:lightgreen;
position: relative;
&:before
{
content:"before";
width: 100%;
height: 20px;
display: block;
background: lightblue;
left: -100%;
top: 0;
position: absolute;
}
&:after
{
content:"after";
width: 100%;
height:20px;
display: block;
background: lightblue;
left: 100%;
top: 0;
position: absolute;
}
}
I have a table structure and I need the nested element to take all the size of the table cell div. So I put it to absolute and define all its positions to 0, it works great on FireFox and Chrome but not on IE :(
Here is the markup :
<div class="table">
<div class="cell">
<figure class="illustration">My illustration</figure>
</div>
</div>
The CSS :
.table {
display: table;
width: 400px;
}
.cell {
position: relative;
display: table-cell;
height: 600px;
background-color: grey;
}
.illustration {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: red;
color: #fff;
}
Here is my pen :
http://codepen.io/balix/pen/qEMwzj
If you see the red background it's ok ;)
Any hack for IE ?
I had the same problem.
In case some one is still looking for a workaround you need to create a container inside .cell with
.cell > div{
height:100%;
width:100%;
position:relative;
}
It's not a position problem, your figure just has zero height. I simply inserted height: 300px into the illustration class and now it works fine on IE:
.illustration {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: red;
color: #fff;
height: 300px;
}
http://codepen.io/anon/pen/QwVRoE
In a real code you sure will have some image inside the figure tag so it should be no problem.
I'm creating a basic webpage, but for the footer there is going to be a slanted edge that will run at the bottom of the page. Where I am having issues as you are unable to add 100% on a border, as i am using bootstrap, so the page must be responsive. Is there a way to achieve this affect whilst being responsive.
div {
width:200px;
height:80px;
background: red;
top:150px;left:100px;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 40px; right: 0;
border-right: 200px solid white;
border-top: 40px solid red;
width: 20;
}
http://jsfiddle.net/2bZAW/3675/
This should work for you. Again, I've used a pseudo element in order to alter the color, but the general consensus is the same. Both the linked question and this use overflow:hidden on the parent and hence won't scroll. As for rotating, since I've used a pseudo element, this should not be an issue:
.wrap {
height: 500px;
width: 100%;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 8;
}
.wrap:after {
content: "";
position: absolute;
height: 130%;
width: 100%;
transform: skewY(-4deg);
background: tomato;
top: -50%;
z-index: -2;
left: 0;
}
.lower {
position: absolute;
bottom: 15%;
right: 0;
}
<div class="wrap">
Hello, World!
<div class="lower">Wanted text here?</div>
</div>
Is there any option to add css :before to .col and .form-groups?
I tried to add a new css but it just don't applying.
The mock is as follow.
CSS
.fg-steps {
position: relative;
}
.fg-steps:before {
background: black;
width: 30px;
height: 30px;
position: absolute !important;
top: 0;
left: -10px;
}
HTML
<div id="fg_parentStatus" class="form-group fg-steps">
:before and :after rules requires content property.
':before' and ':after' do not work without content property.
change your code to
.fg-steps {
position: relative;
}
.fg-steps:before {
content: '';
background: black;
width: 30px;
height: 30px;
position: absolute !important;
top: 0;
left: -10px;
}