I have a div :
<div class="titre_section" id="identity_section_titre_section">Identité du déclarant</div>
i need to put a background outside the div to apply a bigger height than the div
for the moment i have :
.titre_section {
position: relative;
#include media-breakpoint-down(sm) {
top: -2em;
}
top: -5em;
left: -2em;
padding-left: 20px;
font-family: $titre_section-font-family;
font-style: normal;
font-weight: bold;
font-size: 22px;
line-height: 25px;
letter-spacing: 0.25px;
color: $form-dark-color;
background: url("/custom/images/titre_section_rectangle.png") no-repeat;
background-size: contain;
}
here the result :
i tried to make this in order to modify the height of the background :
.titre_section::before{
content: "";
background: url("/custom/images/titre_section_rectangle.png") no-repeat;
background-size: contain;
}
but it's not working i don't see the background.
the result need to be like. i can't edit the html because we use zend form system
Here's a quick example using position: absolute to ensure that the background doesn't take up space, and z-index to ensure that the background is behind the content.
.section {
position: relative;
}
.section:before {
content: '';
position: absolute;
width: 400px;
height: 100px;
background: red;
z-index: -1;
}
<div class="section">Identité du déclarant</div>
<div>Lorem ipsum</div>
I have used :pseudo element to add the border effect in the left
.titre_section {
position: relative;
padding: 0px 0 10px 35px;
border-bottom: 1px solid #d2cfc7;
font-weight:bold;
margin-bottom:20px
}
.titre_section:before {
content: '';
position: absolute;
top: 0;
bottom: -20px;
width: 2px;
background: #bb8f29;
left: 20px;
}
<div class="titre_section" id="identity_section_titre_section">Identité du déclarant</div>
Related
I'm trying to write CSS to get this design
Here's my CSS so far:
.exp {
font-weight: 300;
display: inline-block;
padding-bottom: 15px;
position: relative;
margin-bottom: 30px;
font-style: italic;
}
.exp:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0%;
border-bottom: 1px solid #219b65;
}
HTML:
<h1 class="exp">Experience</h1>
And here's the JSFIDDLE
Any idea how to go about doing this? I did it a few years ago but couldn't get it to work again!
Here's a complete answer for you. Adjust widths to you needs.
.FromTheFounder {
font-weight: 300;
display: inline-block;
padding-bottom: 15px;
position: relative;
margin-bottom: 30px;
font-style: italic;
}
.FromTheFounder:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 13px;
left: 0%;
border-bottom: 1px solid #219b65;
z-index: 1;
}
.FromTheFounder:after {
content: "";
position: absolute;
width: 300%;
height: 1px;
bottom: 13px;
left: 0%;
border-bottom: 1px solid #ccc;
}
https://jsfiddle.net/vjhg7mna/
Brett's answer will work perfectly if you know the width of your container, or want the underline to only span a certain width. If you want the underline to fill the available space, you'll need two elements - one for the full-width underline, and the other for the highlighted underline.
This would also be possible with one element using ::after in place of exp-title and setting the content property to "Experience", but that's not very user-friendly.
Note that I've made the underline significantly fatter (5px) so the effect is more obvious.
.exp {
position: relative;
font-style: italic;
border-bottom: 5px solid #ccc;
}
.exp-title {
display: inline-block;
border-bottom: 5px solid #f00;
font-weight: 300;
padding-bottom: 15px;
margin-bottom: -5px;
}
<h1 class="exp">
<span class="exp-title">Experience</span>
</h1>
For what it's worth, another option here is to use a linear-gradient background on a pseudo element, instead of an actual border.
The disadvantage here is that this option doesn't have the flexibility to automatically match the width of any arbitrary length of text in your h1. But then again, if you've got several headers, and you want the highlighted portion of the underline to be the same width for all of them, regardless of text length, this may be the way to go.
.some-container {
position: relative;
padding-bottom: 15px;
}
.exp {
font-weight: 300;
display: inline-block;
margin-bottom: 0;
font-style: italic;
}
.some-container::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0%;
background-image: linear-gradient(to right, steelblue, steelblue 25%, lightgray 25%, lightgray);
}
<div class="some-container">
<h1 class="exp">Experience</h1>
</div>
I want make the popup windows like youtube share because its stick next to button. I tried bootstrap modal but it's popup in the middle of screen. When click youtube share button,pop up shows around button.
Does anyone know how to fix it?
HTML
<div class="box">
<a class="button" href="#popup1">share</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<div class="content">
<div class="social-fuctions">
Share to facebook
</div>
</div>
</div>
</div>
css code
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
/*
.button {
font-size: 1em;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
*/HTMLHTML
.social-fuctions{
display: flex;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.2);
/* transition: opacity 100ms;*/
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
position: absolute;
bottom: -550px;
right: 5%;
left: 15%;
padding: 15px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Any suggestion? Thanks a lot
Set your box to position: relative and make the modal box / pop up a child of the box div. This way, the overlay will be positioned absolutely within the parameters of it's parent div.
.box {
position: relative;
}
.modal {
position: absolute;
}
Something like this:
https://jsfiddle.net/bommy8zu/5/
Moosetuin's approach is simple and effective.
But there is no need for a relative parent. And a absolute Modal.
I made two examples one is just like Youtube's ShareBox and the other will allways be centered.
How To Center:
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
Check it out here: https://codepen.io/Tibixx/pen/zWEpqq
I'm trying to redo a client site that's currently not responsive and throughout the site she has long images that are trapezoids with text inside. Of course, on devices, you can barely read it.
So I'm trying to turn it into CSS using shapes. Tried a bunch of examples but nothing working at the moment. I think the difference is the examples seem to use hard width numbers instead of 100% for fluid width. I have a pen here: https://codepen.io/anon/pen/KmgoqE and here's the code I'm playing with as I post this (still playing, of course):
h2.test-text {
background: #000;
color: #FFF;
padding: 5px;
font-size: 30px;
line-height: 1;
width: 100%;
text-align: center;
position: relative;
}
h2.test-text:before {
content: "";
position: absolute;
border: none;
top: -4%;
bottom: -11%;
left: -3%;
right: -3%;
z-index: -1;
-webkit-transform: perspective(50em) rotateX(-30deg);
transform: perspective(50em) rotateX(-30deg)
}
You have already good answers
To give another try. I have opted to fix your current attempt.
Basically the problem is that the background should be on the pseudo instead of on the base
h2.test-text {
color: #FFF;
padding: 5px;
font-size: 30px;
line-height: 1;
width: 100%;
text-align: center;
position: relative;
}
h2.test-text:before {
content: "";
position: absolute;
border: none;
top: -0px;
bottom: -50%;
left: 0px;
right: 0px;
z-index: -1;
background: #000;
transform: perspective(20em) rotateX(-45deg);
transform-origin: top;
}
<h2 class="test-text">Check out what our Clients are Saying</h2>
And now a fancy efect
h2.test-text {
color: #FFF;
padding: 5px;
font-size: 30px;
line-height: 1;
width: 100%;
text-align: center;
position: relative;
perspective: 20em;
animation: tilt 2s infinite alternate linear;
}
h2.test-text:before {
content: "";
position: absolute;
border: none;
top: -0px;
bottom: -50%;
left: 0px;
right: 0px;
z-index: -1;
background: #000;
transform: rotateX(-45deg);
transform-origin: top;
}
#keyframes tilt {
from {perspective-origin: left}
to {perspective-origin: right}
}
<h2 class="test-text">Check out what our Clients are Saying</h2>
By using pseudo elements, and skew them, you can achieve that.
This one works if the line breaks up to 3 lines, and if you need more, a media query will fix that.
h2.test-text {
background: #000;
color: #FFF;
padding: 5px;
font-size: 30px;
width: calc(100% - 120px);
margin: 0 auto;
text-align: center;
position: relative;
}
h2.test-text:before,
h2.test-text:after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 70px;
background: inherit;
z-index: -1;
}
h2.test-text:before {
left: -35px;
transform: skewX(30deg)
}
h2.test-text:after {
right: -35px;
transform: skewX(-30deg)
}
h2.test-text.nr2 {
margin-top: 20px;
width: calc(60% - 100px);
}
<h2 class="test-text">Check out what our Clients are Saying</h2>
<h2 class="test-text nr2">Check out what our Clients are Saying</h2>
You can achieve this effect by using the the common transparent border trick to achieve css triangles. Just instead of even borders and only one set to non-transparent you use different border sizes and two colors. I colored the right edge differently so it's easier to see what's going on.
h2.test-text {
background: #bada55;
color: #FFF;
font-size: 30px;
padding: 5px;
line-height: 1;
width: 80%;
text-align: center;
position: relative;
margin:40px;
}
h2.test-text:before, h2.test-text:after {
content:"";position:absolute;top:0;width:0;height:0;
border-style:solid;
border-width:20px 15px;
}
h2.test-text:before{
left: -30px;
border-color: #bada55 #bada55 transparent transparent;
}
h2.test-text:after {
right: -30px;
border-color:blue transparent transparent red;
}
<h2 class="test-text">Whatever somebody says…</h2>
I'm trying to achieve headings with border that expands outside of viewport on one side, just like on the picture below.
I've managed to code the one that is aligned to the left and border expands to the left side using code like this:
.wrapper {
width: 1100px;
margin: 0 auto;
box-sizing: border-box;
padding: 1.5rem;
}
h2 {
font-size: 2em; /* 32/16 */
font-weight: 200;
color: #000;
position: relative;
margin: 0 -9600rem;
padding: 1.2rem 9600rem;
background: transparent;
z-index: 0;
display:block;
max-width:660px;
}
h2::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0rem;
right: 9598.5rem;
background: transparent;
border:2px solid #000;
}
h2.right {
font-size: 2em; /* 32/16 */
font-weight: 200;
color: #000;
text-align: right;
position: relative;
margin: 0 -9600rem;
padding: 1.2rem 9600rem;
background: transparent;
z-index: 0;
display:block;
max-width:660px;
}
h2.right::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 9598.5rem;
right: 0rem;
background: transparent;
border:2px solid #000;
}
<section>
<div class="wrapper">
<h2>s každou nehnuteľnosťou možno pohnúť najmä vo váš prospech</h2>
<h2 class="right">s každou nehnuteľnosťou možno pohnúť najmä vo váš prospech</h2>
</div>
</section>
HTML:
CSS:
Problem is with the text that is supposed to be aligned to the right of the wrapper and expand the border to the right. My results so far look like this:
The text still begins on the left edge of the wrapper and is not 660px from the right edge of the wrapper as it is supposed to be. Any idea how to fix this? I've tried playing around with multiple variables but nothing worked.
I have played around a little with it in a fiddle: https://jsfiddle.net/38t1286m/
EDIT: I played with it some more... https://jsfiddle.net/38t1286m/4/ ;)
Basically I have simplified it, so that the HTML looks like this:
<header>
<h2>
This is my LEFT side header
</h2>
</header>
<p>
Here is some text in between...
</p>
<header class="right">
<h2>
This is my RIGHT side header
</h2>
</header>
And with the following css:
p {
width: 660px;
margin-right: auto;
margin-left: auto;
}
h2 {
border: 1px solid black;
max-width: 660px;
margin: 0;
margin-left: auto;
display: inline-block;
padding-top: 20px;
padding-bottom: 20px;
}
header {
position: relative;
max-width: 660px;
padding: 0;
margin: 0;
margin-right: auto;
margin-left: auto;
}
header:before {
content: " ";
width: 660px;
border: 1px solid red;
position: absolute;
left: -660px;
right: -660px;
overflow: hidden;
top: 0;
bottom: 0;
}
header.right {
text-align: right;
}
header.right:before {
left: 660px;
right: 660px;
}
That's at least how I think I would solve it. :)
You could float the second heading to the right, and then clear it using :after
h2.right {
text-align: right;
background: transparent;
z-index: 0;
float: right;
}
h2.right::after {
content: '';
clear: both;
}
codepen
I need to have a image on div background. Over this image, its mandatory to have one title, subtitle and a button.
All these three elements need to have top and left in % for dynamic position.
I had made several tries, but without success.
HTML
<div id="container">
<div id="block1">
<div id="title">LIAM</div>
<div id="subtitle">SUPER SLIM FIT</div>
<div id="link">
See all jeans
</div>
</div>
</div>
CSS
#block1 {
background-image: url('http://tiffosi.com/fw16/img/img1.jpg');
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 1450px;
max-width: 1086px;
max-height: 1450px;
position: relative;
top: 0;
left: 0;
}
#block1 #subtitle {
font-size: 16pt;
color: white;
position: absolute;
top: 23.4%;
left: 43.5%;
letter-spacing: 1px;
}
#block1 #link {
width: 184px;
text-align: center;
height: 43px;
line-height: 43px;
border: 1px solid white;
font-size: 11pt;
top: 29.3%;
left: 41.3%;
position: absolute;
}
#block1 #link a {
color: white;
text-decoration: none;
font-weight: 100;
}
#media only screen and (min-width : 768px) {
#block1 #title{
top: 12%;
left:42%;
font-size:80%;
}
}
#media only screen and (min-width : 992px) {
#block1 #title {
font-size: 100%;
position: absolute;
top: 16.5%;
left: 42%;
letter-spacing: 2px;
}
}
#block1 #title {
font-size: 97px;
color: white;
position: absolute;
top: 16.5%;
left: 42%;
letter-spacing: 2px;
}
Link to jsffidle: https://jsfiddle.net/jggscada/
instead of positioning each element individually , i suggest you give position:absolute to #block1 and position it on the image ( image as background to #container or make another div surrounding the #block1 div ) .
i used top:40vh -> vh=viewport height
and then position the elements inside the block1 as you desire.
also i deleted the #link div and added styles directly to the link instead. seems more logical this way :) . if you want a link to behave like a div use display:block , in this case i used display:inline-block
VERY IMPORTANT : do not use fixed width and height if you want something to be responsive. i used width:100vw on .container so it has the width of the screen.
see snippet below or fiddle here > Jsfiddle
let me know if it works for you
#container {
background-image: url('http://tiffosi.com/fw16/img/img1.jpg');
background-repeat: no-repeat;
background-size: contain;
width: 100vw;
height: 1450px;
max-width: 1086px;
max-height: 1450px;
position: relative;
top: 0;
left: 0;
border: 1px solid red;
}
#block1 #title {
font-family: oswald-bold;
font-size: 60pt;
color: white;
letter-spacing: 5px;
}
#block1 #subtitle {
font-family: oswald-bold;
font-size: 16pt;
color: white;
letter-spacing: 1px;
}
#block1 a{
width: 184px;
text-align: center;
height: 43px;
line-height: 43px;
border: 1px solid white;
font-family: Oswald-Medium;
font-size: 11pt;
color: white;
text-decoration: none;
font-weight: 100;
display:inline-block;
margin-top:50px;
}
#block1 {
position:absolute;
top:40vh;
left:0;
margin:0 auto;
right:0;
text-align:center;
}
<div id="container">
<div id="block1">
<div id="title">LIAM</div>
<div id="subtitle">SUPER SLIM FIT</div>
See all jeans
</div>
</div>