I've made a divider for my site and it works perfectly! I'm just having trouble with adding a little box on top of my divider as shown in the picture, any help would be appreciated!
.divider {
width: 2px;
background: linear-gradient(90deg, rgba(6,144,45,1) 0%, rgba(6,144,45,0.0032387955182072714) 87%);
height: auto;
min-height: 5vh;
margin-right: 25px;
}
<div class="divider"></div>
The box on the divider should look like this
You can achieve this by using the pseudo-element ::before.
.divider::before {
content: '';
display: block;
position: relative;
background-color: black;
width: 8px;
height: 8px;
top: 0;
left: -2px;
}
.divider {
background-color: black;
width: 4px;
height: 60px;
}
<div class="divider"></div>
Related
I want to build the following layout:
Preferable i want only use css for that. But even with an background-image i wouldn't know how to build it. I searched the web, but didn't find the help i needed.
The Layout contains a div with some text in it. The background-color is a light gray. Then i would love to add a darker triangle background as shown in the picture. This should work as a responsive layout, too.
What i tried:
# html
<div class="wrapper">
<h1>Das ist ein test</h1>
<h2>subheadline</h2>
</div>
#css
.wrapper {
padding-top: 100px;
text-align: center;
width: 100%;
background-color: #4d4d4d;
height: 400px;
color: #fff;
position: relative;
}
.wrapper:before{
height: 50%;
width:100%;
position:relative;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
content:'';
display:block;
position:absolute;
top: 0;
background-color: #3d3d3d;
}
But this does not work and i can't figure it out on my own.
Thank you for your help!
You can set 2 light gradients on top of the darker background.
They overlap each other and leave only the remaining triangle darker
div {
width: 400px;
height: 200px;
border: solid 1px green;
background: linear-gradient(to top left, lightgreen 50%, transparent 50%),
linear-gradient(to top right, lightgreen 50%, transparent 50%), green;
}
<div></div>
Try this one, but still need some work on the responsive part.
.box{
position: relative;
width: 100%;
max-width: 600px;
background: #ccc;
min-height: 300px;
}
.box:before {
width: 0;
height: 0;
content: "";
position: absolute;
z-index: 0;
top: 0;
left: 0;
border-left: 300px solid transparent;
border-right: 300px solid transparent;
border-top: 180px solid #555;
}
.box .content{
z-index: 10;
position: relative;
color: #fff;
text-align: center;
padding-top: 40px;
}
h1, h2{
margin: 0;
padding: 0;
}
h2{
margin-bottom: 80px;
}
.btn{
background: #f00;
color: #fff;
display: inline-block;
padding: 5px 10px;
text-align: center;
text-decoration: none;
min-width: 200px;
font-size: 20px;
}
<div class="box">
<div class="content">
<h1>Headline</h1>
<h2>Headline</h2>
CTA
</div><!--// end .content -->
</div><!--// end .box -->
This should get you close, and illustrates a CSS only approach:
* {
margin: 0;
padding: 0
}
body {
background: #ccc;
min-height: 500px;
}
div {
width: 0;
height: 0;
margin: 0px auto;
border: 200px solid transparent;
border-top-color: grey;
}
a {
display: block;
background: blue;
color: white;
padding: 5px 10px;
width: 200px;
margin: 0px auto;
position: relative;
top: -200px;
text-align: center;
text-decoration: none;
}
<div></div>
link
I'm trying to create a reusable widget. It will have some sort of background image, with a transparent text overlay. The background of the text overlay will be mostly square, but have one transparent corner. Is there an easy way to do this using CSS?
You can use linear-gradient background. Here is your reusable widget. Cheers!
img {
display: block;
width: 100%;
}
.img-widget {
width: 250px;
height: auto;
position: relative;
}
.img-widget .overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25%;
background: transparent;
text-align: center;
background-image: linear-gradient(118deg, transparent 0%, transparent 10%, #7AAD7A 10%, #7AAD7A 60%);
display: inline-block;
vertical-align: middle;
}
.img-widget .overlay:after {
display: inline-block;
vertical-align: middle;
content: '';
height: 100%;
}
<div class="img-widget">
<img src="http://placehold.it/200x200" />
<div class="overlay">Some text here</div>
</div>
#green-overlay {
background: linear-gradient(135deg, transparent 30px, rgba(0,0,0,.5) 0) top left;
add the rest of your css for this element
}
Something like this should work. Just replace the rgba value and 30px with how deep you want the corner.
https://jsfiddle.net/snavy/acbo36n2/
Try something like the following (LIVE PEN HERE):
HTML
<div class="row">
This div has a background image
<div class="divider"><div id="rightDivider"><div></div></div></div>
</div>
CSS
html, body {margin: 0; padding: 0;}
#rightDivider {
width: 80%;
height: 100px;
background: blue;
float: right;
position: absolute;
right: -50px;
}
#rightDivider div{
bottom: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 100px 60px;
border-color: transparent transparent blue transparent;
float: right;
position: relative;
right: 100%;
}
.divider {
position: absolute;
bottom: 100px;
right: 0;
left: 0;
}
.row {
background: orange;
position: relative;
height: 300px;
padding: 0;
margin: 0;}
You could try using css3's -webkit-clip-path: polygon(); attribute to solve your issue.
See reference here: CSS3 clip-path
My image is displaying outside the element tag, like this:
Notice that the image itself is outside the element. Tried with both background image and IMG tag. Same results.
HTML and CSS structure:
.class {
width: 35px;
height: 35px;
position: absolute;
background: #FFFFFF;
margin-left: 310px;
border: 1px solid #E6E6E6;
border-radius: 50%;
margin-top: 5px;
}
.rounded {
border-radius: 100%;
}
.class2 {
height: 25px;
z-index: 100;
position: absolute;
width: 25px;
right: 0;
background-size: 25px 25px !Important;
background-color: black !important;
}
<div class="class">
<div class="class2 rounded" style="background: url('<image fetched with php code here>')" ></div>
</div>
The blue square in the image attached above code, is the inspector highlighting and NOT a part of the code/structure.
eThe actual question: Look at the blue element highlighter. That is the element, that the image has been assigned to. Notice how the image is sticking a few pixels out in the top and left side. Why is it outside the element?
I tried display: flex; as mentioned in a now deleted post, that didn't fix it.
just change position:absolute in .class (parent) to position:relative - that would do the trick. Like so:
.class {
width: 35px;
height: 35px;
position: relative;
background: #FFFFFF;
margin-left: 310px;
border: 1px solid #E6E6E6;
border-radius: 50%;
margin-top: 5px;
}
added later:
I see it now. That behaviour is absolutely normal cause they were sqares.
remove radius from .class2 for testing and zoom and you'll see why it happens.
Just adjust position of class2 adding this, and it would be ok.
right: 2px;
top: 2px;
If you set:
top: 0;
left: 0;
right: 0;
bottom: 0;
This will make the element adjustable by margin.
Then you can add:
margin: auto;
and it will display the image centered.
.class {
width: 35px;
height: 35px;
position: absolute;
background: #FFFFFF;
margin-left: 310px;
border: 1px solid #E6E6E6;
border-radius: 50%;
margin-top: 5px;
}
.rounded {
border-radius: 100%;
}
.class2 {
height: 25px;
z-index: 100;
position: absolute;
width: 25px;
right: 0;
left: 0;
bottom: 0;
top: 0;
margin: auto;
/*background-size: 30px 30px;*/
}
<div class="class">
<div class="class2 rounded" style="background: url('http://www.lorempixel.com/100/100/"></div>
</div>
Right, I ran into a bit of a problem and not to sure if this can be solved another way.
I need to move the content: "F"; and center it onto the border I have in the top left corner. Now is this possible without creating another element?
HTML:
<div class="userBoxF"></div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content: "F";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
The only way I can think to do it is to create the corner as a completely separate element so I can put the text "F" into a span (or something) and move it that way.
Demo Here
Note: Nothing here will change size, width and height for both the box and corner will always be the same.
Here is what I want, using the solution i found but would rather not use.
HTML:
<div class="userBoxF">
<div class="corner"><span>F</span></div>
</div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF .corner {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
.userBoxF .corner span {
display: block;
position: absolute;
top: -30px;
left: -20px;
}
Here is a demo of the solution I came up with but I would rather not create anymore elements.
My Solution
You can use :before wit :after together.
I removed the span:
<div class="userBoxF">
</div>
And changed the CSS blocks to this:
.userBoxF:before {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
content: "";
}
.userBoxF:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "F";
font-size: 30px;
}
And here's the updated fiddle
EDIT: Here's an added bonus!
You can jack the "F" from the class, if you want it to be more versatile, if you use CSS's attr inside content. Example:
<div class="userBox" data-l="F">
</div>
And:
.userBox:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "" attr(data-l);
font-size: 30px;
}
And another fiddle
Arguably the "F" is actual content as it's not a styling option...it actually denotes something and, perhaps should be read by a screenreader (for instance) then a span with a gradient (TL - BR) mightbe more appropriate.
JSFiddle Demo
HTML
<div class="userBoxF">
<span class="section-letter">F</span>
</div>
CSS
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.section-letter {
position: absolute;
top: 0;
left: 0;
width:2em;
height:2em;
line-height: 1em;
text-align: left;
padding:0.25em 0 0 0.25em;
font-size: 30px;
background: linear-gradient(135deg, pink 0%, pink 50%, transparent 50%, transparent 100%);
}
Simply use another :psuedo:
Demo Fiddle
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:before,.userBoxF:after{
position: absolute;
top: 0;
left: 0;
}
.userBoxF:before {
content:"";
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
}
.userBoxF:after {
content:attr(data-l);
top: 10px;
left: 10px;
font-size: 30px;
}
From a single pseudo, you can use a gradient as background : DEMO
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content:"F";
position: absolute;
top: 0;
left: 0;
text-indent:20px;
line-height:60px;
width:80px;
height:80px;
background:linear-gradient(to bottom right, #F385FF 51%, transparent 49%);
font-size: 30px;
}
background-image as gradient can be just an image like in old days :
DEMO:
I am trying to create a footer according to a design I received ...
The background color on the left is different from the right one:
I have the following markup:
<div class"wrapper">
<div class="content">
The Text here should no go over the logo
</div>
</div>
My idea is Content DIV to have the logo as background image aligned left and no repeat.
But then I don't know how to create the different color on left and right ...
And I am not sure if I can control the height so that everything aligns.
The content div is centered and has the orange border on the image ...
Thank You,
Miguel
Try this http://codepen.io/nicknameless/pen/cblzB/
I've used CSS3 and no additional markup. This should work for you. It could be cleaned up I think, this is just a quick overview to get you started.
The HTML you provided
<div class="wrapper">
<div class="content">
The Text here should no go over the logo
</div>
</div>
The CSS
html, body {
padding: 0;
margin: 0;
}
div.wrapper {
height: 40px;
background: #850000;
width: 100%;
display: block;
position: relative;
overflow: visible;
top: calc( 100px - 40px );
}
div.wrapper:before {
background: transparent url('http://placehold.it/100x100') no-repeat 0 0;
content: " ";
width: 100px;
height: 100px;
position: absolute;
bottom: 0;
left: 10%;
}
div.content {
left: calc( 10% + 100px );
padding-left: 10px;
bottom: 0;
background-color: #C70000;
display: block;
height: 40px;
position: absolute;
width: calc( 100% - ( 10% + 100px ) );
}
It's was really a pain in the ass, I recommend to take the inner rectangle as a picture, but if you really want it in CSS, here it's: http://jsfiddle.net/B97ym/
HTML:
<div class='wrapper'>
<div class="content">The Text</div>
<div class='border'>
<div class='border2'></div>
<div class='border3'></div>
<div class='logodiv'>
<div class='rectangle'></div>
</div>
</div>
CSS:
.wrapper {
width: 500px;
height: 50px;
margin: 100px auto;
position: relative;
background: linear-gradient(to right, #9c9e9f 40%, #000000 40%);
}
.content{
margin: 0 0 0 50%;
color: #ffffff;
}
.border{
width: 4em;
height: 4em;
background: #FF0000;
position: absolute;
left: 33.7%;
top: -55%;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
background: linear-gradient(to top, #000000 62%, #9c9e9f 62%);
}
.border2{
width: 0.8em;
height: 4em;
background: #9c9e9f;
position: absolute;
left: 80%;
}
.border3{
width: 0.8em;
height: 0.85em;
background: #000000;
position: absolute;
left: 80%;
top: 80%;
}
.logodiv {
width: 2.5em;
height: 2.5em;
background: #ffffff;
position: absolute;
top: 18%;
left: 18%;
}
.rectangle{
width: 2.1em;
height: 2.1em;
position: relative;
background: #ffffff;
top: -42%;
left: -42%;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
Hope it's will be helpful to someone (:
Use a CSS background-image on the wrapper layer that contains the entire logo, bars an all. Add enough margin-left on the inner layer to shove the text beyond the logo.
Create a div with two div's inside with 50% width for left and right and fixed height. Make sure you overflow the logo.
I wonder if this FIDDLE will give you a place to start.
CSS
.holder {
width: 500px;
margin: 100px auto;
position: relative;
}
.leftdiv {
width: 40%;
height: 60px;
float: left;
background-color: red;
}
.rightdiv {
width: 60%;
height: 60px;
float: left;
background-color: blue;
}
.logodiv {
width: 44px;
height: 44px;
position: absolute;
left: 157px;
top: -42px;
background-color: white;
transform: rotate(45deg);
border-left: 20px solid blue;
border-right: 20px solid red;
border-top: 20px solid red;
border-bottom: 20px solid blue;
}
.whiteout {
background-color: white;
width: 30px;
height: 60px;
border: 0px solid black;
position: absolute;
top: -60px;
left: 183px;
}