I am trying to make some CSS code so that I can have vertical zigzag lines on the left and right of my BODY tag.
I want it to look like a ticket... something like this going from top to the bottom of the page on the left and right: https://roalddahl.fandom.com/wiki/Golden_Ticket?file=Golden_Ticket.png
I found this question with the requirement of the zigzags on the left, but it's not working correctly for me when I use on on the BODY: zigzag border in css left side
body {
background-color: #c5ac5a;
background: linear-gradient(-137deg, #c5ac5a 6px, transparent 0) 0 5px, linear-gradient(320deg, #c5ac5a 5px, #fff 0) 0 5px;
background-position: left;
background-repeat: repeat-y;
background-size:10px 10px;
}
<body>
<h1>The Title</h1>
</body>
EDIT: I want the whole background to be #c5ac5a and the vertical zigzags on both sides.
Use the :before and :after to achieve your goal. (I also changed the columns to use flex, but that's not necessary for the issue at hand). See provided snippet below:
body {
background: white;
}
.ticket {
background-color: #c5ac5a;
position: relative;
padding: 10px;
}
.ticket:before,
.ticket:after {
top: 0;
left: -10px;
content: '';
width: 10px;
height: 100%;
position: absolute;
background-color: #c5ac5a;
background: linear-gradient(-137deg, #c5ac5a 6px, transparent 0) 0 5px, linear-gradient(320deg, #c5ac5a 5px, transparent 0) 0 5px;
background-position: left;
background-repeat: repeat-y;
background-size:10px 10px;
}
.ticket:after {
left: auto;
right: -10px;
top: 0;
transform: scaleX(-1);
}
.hr {
border-bottom: 2px solid black;
}
h1 {
text-align: center;
font-family: Times, serif;
font-size:40px;
}
.column {
text-align:center;
flex: 1 1 auto;
padding: 10px 0;
}
.row {
display: flex;
}
.ticket__footer {
font-size: 12px;
text-align: center;
padding-top: 10px;
}
.bold {
font-weight:bold;
}
<div class="ticket">
<div class="hr">
</div>
<div class="title">
<h1>
GOLDEN TICKET
</h1>
</div>
<div class="hr">
</div>
<div class="row">
<div class="column">
<span class="small">DATE</span></br>
<span class="bold">FEB. 1</span>
</div>
<div class="column">
<span class="small">TIME</span></br>
<span class="bold">10 A.M (SHARP)</span>
</div>
<div class="column">
<span class="small">PLACE</span></br>
<span class="bold">RIGHT HERE</span>
</div>
</div>
<div class="hr">
</div>
<div class="ticket__footer">
THIS GOLDEN TICKET ENSURES ADMITTANCE
</div>
</div>
Related
attached a js fiddle to show my issue. I want the orange image to take all the top area of the card and not have padding on the top and sides. the image should show from the very top and takes all the sides with no space
link to fiddle
.pricing-card {
color: black;
width: 100%;
max-width: 330px;
max-height: 463px;
flex-flow: column;
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0px 10px 70px #2e231d1a;
border-radius: 50px;
opacity: 1;
min-height: 550px;
margin: auto;
}
#logo {
top: 50px;
position: absolute;
left: 50px;
}
#rectangle {
max-width: 330px;
}
<div class="price-container">
<div v-if="checkDomainTrial" class="price-text">
Get your entire first month free on us!
</div>
<div class="header">
<div id="wait">Wait! Don't go yet!</div>
</div>
<div class="pricing-card">
<div class="pricing-card-header">
<img id="rectangle" src="https://i.ibb.co/FVkvCv5/Rectangle-cancellation.png" alt="" />
I need to have a second image align left of the text but layered on top of the background image. I am having some trouble figuring out what css I need to make this work. Currently everything I have tried messes with the text positioning or the background image.
Luckily, this is a personal project so there is no timeline but I would appreciate any help that could be given.
I just started learning web development this past year so it all still feels a little new to me.
.hero-full-container {
height: 100vh;
position: relative
}
.background-image-container {
background-size: cover;
background-repeat: no-repeat;
background-position: 50%
}
.white-text-container h1 {
color: #fff
}
.overlay-gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .3), transparent);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, .3) 0, transparent 100%);
background-image: linear-gradient(180deg, rgba(0, 0, 0, .3) 0, transparent);
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#4D000000", endColorstr="#00000000", GradientType=0)
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px
}
.row {
margin-left: -15px;
margin-right: -15px
}
.col-xs-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px
}
.col-md-7 {
width: 58.33333%
}
.col-md-offset-1 {
margin-left: 8.33333%
}
.hero-full-wrapper .text-content {
padding-top: 30%
}
<div class="hero-full-container background-image-container white-text-container" style="background-image:url('./assets/images/home_01.jpg')">
<div class="overlay-gradient"></div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-7 col-md-offset-1">
<div class="hero-full-wrapper">
<div class="text-content">
<h1>William</h1>
<h1>Mark</h1>
<h1>Derichsweiler</h1>
<!--<p>Lorem ipsum</p>-->
</div>
</div>
</div>
</div>
</div>
</div>
I don't undestand very well your question, but if you want to have a background image and another image above this image, you can do this creating more div. Once you insert a background image, you can insert another div inside this div, e.g. :
<div class="main-container">
<div class="second-image">
<img src="link_to_your_image">
</div>
<div class="text-area">
<h1>William</h1>
<h1>Mark</h1>
<h1>Derichsweiler</h1>
</div>
</div>
and the for css, you can use flex property, setting the direction to flex-direction: row, e.g. :
*{
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.main-container {
width: 100%;
height: 100%;
background-image: url('link_to_your_image');
background-color: red;
display: flex;
flex-direction: row;
align-items: center;
}
.second-image, .text-area {
margin-left: 50px;
}
I hope this can help you, have a nice day.
Here is the effect I am trying to achieve:
Example
I know how to make the triangle, my issue is that is is being created INSIDE of the box. If I set "left" to 100%, the box will disappear behind the right side of the box instead of going outside of the box over the next one.
Here is the Pen I am working on to try and get this to work:
My Code
HTML:
<div class="square title">
<div class="content">
<div class="table">
<div class="table-cell ">
<ul>This demo shows you can center multiple types of content :
<li>Text</li>
<li>Images</li>
<li>Lists</li>
<li>... (you can also do it with forms)</li>
</ul>
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell ">
<p>Hello World!</p>
</div>
</div>
</div>
</div>
CSS:
body {
font-family: sans-serif;
color: #fff;
font-size: 20px;
text-align: center;
}
.square {
float:left;
position: relative;
width: 33%;
padding-bottom : 33%; /* = width for a 1:1 aspect ratio */
/* margin:1.66%; */
background-color:#1E1E1E;
overflow:hidden;
/* border: solid 1px red; */
margin: 5px;
}
.content {
position:absolute;
height:90%; /* = 100% - 2*5% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 5%;
}
.table{
display:table;
width:100%;
height:100%;
}
.table-cell{
display:table-cell;
vertical-align:middle;
}
/* For list */
ul{
text-align:left;
margin:5% 0 0;
padding:0;
list-style-position:inside;
}
li{
margin: 0 0 0 5%;
padding:0;
}
.title::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid green;
left: 95%;
/* top: 45%; */
/* z-index: 999; */
}
I tried making a whole new div around the square and setting that to have the triangle, but it made the triangle go all the way to the right of the screen, even without setting anything for the left or right.
I also tried z-index but that didn't do anything either.
You can easily achieve this with only background:
.box {
display: inline-block;
width: 150px;
height: 150px;
background: grey;
}
.box:last-child {
background:
linear-gradient(to top right,grey 49.8%,transparent 50%) 0 calc(50% - 15px),
linear-gradient(to bottom right,grey 49.8%,transparent 50%) 0 calc(50% + 15px),
#000;
background-size:30px 30px;
background-repeat:no-repeat;
}
<div>
<div class="box">
</div>
<div class="box">
</div>
</div>
How do you place text above an image, such that it runs across the bottom of the image.
i.e.
<div class="i_have_an_image">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
I am struggling to work it out, to see what I mean, The following web site, has a great example of this. I've seen it before on sites, heres an example snapshot of what I mean:
Wrap the image in an inline-block div which has position:relative.
Position the h2 absolutely with bottom:0 and width:100% and the height of the h2 will adjust automatically to the content of the positioned element.
.i_have_an_image {
display: inline-block;
position: relative;
}
.i_have_an_image img {
display: block;
}
.i_have_an_image h2 {
position: absolute;
margin: 0;
bottom: 0;
left: 0;
width:100%;
padding: 1em;
background: rgba(255, 255, 255, 0.5);
color: white;
}
<div class="i_have_an_image">
<img src="http://www.fillmurray.com/460/300" alt="">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
.i_have_an_image{
position:relative;
width:200px;
height:200px;
}
h2{
position:absolute;
bottom:0px;
background:rgba(0,0,0,0.5);
color:#fff;
margin:0px;
}
<div class="i_have_an_image">
<img src="http://i-cdn.phonearena.com/images/article/32854-image/First-samples-from-Sonys-new-13MP-stacked-camera-sensor-capable-of-HDR-video-show-up.jpg">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
.butFrame {
width: 32%;
position: relative;
cursor: pointer;
}
.butFrame .butHeading {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 0;
display: block;
background: rgba(0, 0, 0, 0.5);
margin: 0;
font-family: inherit;
font-size: 1.2em;
color: #fff;
text-align: center;
text-transform: uppercase;
font-weight: 400;
}
<div class="butFrame">
<img src="https://unsplash.it/g/380/210?random">
<div class="butHeading">Heading</div>
https://jsfiddle.net/n0aLts9w/
Another solution of image with heading and sub heading. (As per your given image)
Demo Here
.i_have_an_image{
position: relative;
background-image: url(http://i.imgur.com/McIDx6g.jpg);
background: url((http://i.imgur.com/McIDx6g.jpg) no-repeat center center;
height: 400px;
width: 400px;
}
.title_wrap{
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: 0;
right: 0;
padding: 15px;
color: #ffffff;
}
.title_wrap h2 {
font-size: 20px;
margin: 0;
}
.title_wrap h6 {
font-size: 12px;
margin: 0;
}
<div class="i_have_an_image">
<div class="title_wrap">
<h2>Heading goes here</h2>
<h6>I appear on top of the image, but aligned along the bottom</h6>
</div>
</div>
You can make it like this:
I added only the "wrap" div
.wrap {
max-width: 300px;
}
h2 {
position: relative;
top: -78px;
opacity: 0.8;
background: #222222;
color: #fff;
}
<div class="i_have_an_image">
<div class="wrap">
<img src="http://www.theage.com.au/content/dam/images/g/p/o/1/v/l/image.related.homepagePortrait.300x370.gpnu1x.2f8s9.png/1466499504473.jpg" alt="Angelika Graswald in court with her lawyers. " width="300" height="370">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
</div>
This is how I've been doing it recently. It's using the new html5 tag figcaption
It doesn't matter how big the image is or what you put in the figcaption it should just work.
figure.overlay {
display: inline-block;
position: relative;
margin: 0;
}
figure.overlay figcaption {
position: absolute;
background: rgba(0, 0, 0, .5);
color: #fff;
bottom: 4px;
width: calc(100%-10px);
padding: 5px;
}
<figure class="overlay">
<img src="http://www.dogbreedinfo.com/images/germanshepherdface.jpg">
<figcaption>
<h3>
'Some header of some sort!'
</h3> Words that make up a sentance! Or maybe 2 sentances.
<br />
<br />Even with a new line
</figcaption>
</figure>
Ho you can do it with flexbox simply like this:
.imageWrapper {
width: 200px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: flex-start;
border: 1px solid black;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a8/Tour_Eiffel_Wikimedia_Commons.jpg");
background-size: 100%;
}
.textAboveImage {
width: 100%;
height: 50px;
background-color: grey;
z-index: 200;
opacity: 0.5;
}
<div class="imageWrapper">
<div class="textAboveImage">I'm text</div>
</div>
Cheers.
You can make it like this:
I added only the "wrap" div
HTML:
<div class="i_have_an_image">
<div class="wrap">
<img src="http://www.theage.com.au/content/dam/images/g/p/o/1/v/l/image.related.homepagePortrait.300x370.gpnu1x.2f8s9.png/1466499504473.jpg" alt="Angelika Graswald in court with her lawyers. " width="300" height="370">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
</div>
CSS:
.wrap {
max-width: 300px;
}
h2 {
position: relative;
top: -78px;
opacity: 0.8;
background: #222222;
color:#fff;
}
I'm having issues implementing the following design:
My specific problem is the blue button in the center, and subsequently the arrow in the middle of it.
I currently have two elements:
<div id="hero">
<!-- this is where the black background is -->
</div>
<div id="content">
<!-- This is the white background -->
</div>
Now somehow, I have to put that blue button right in the middle of the hero and the rest of the content, and on top of that, there has to be an arrow in the middle of that button and the button.
I don't know where to start doing this. I'm assuming the button needs to have a z-index higher than the hero and the content, and the arrow has to have a z-index higher than the blue button.
But in what part of the HTML document do I write the tags in? For example:
<div id="hero">
<!-- This is the black background -->
</div>
<button type="button" class="cta">Button Tex bla bla</button>
<button type="button" class="arrow"><img src="..."></button>
<div id="content">
<!-- This is the white background -->
</div>
I'm using Bootstrap for the grid.
With the combination of position and margin you can position the elements the way you want:
#container{
position: relative;
border: 1px solid black;
}
#hero{
height: 150px;
background-color: black;
color: white;
text-align: center;
padding-top: 30px;
}
#hero span{
max-width: 300px;
display: block;
margin: 0 auto;
font-size: 30px;
}
#content{
height: 200px;
background-color: white;
color: black;
text-align: center;
font-size: 15px;
padding-top: 80px;
}
#content span{
max-width: 300px;
display: block;
margin: 0 auto;
font-size: 25px;
}
.cta{
position: absolute;
width: 200px;
height: 50px;
left: 50%;
margin-left: -100px;
margin-top: -25px;
background-color: #2196F3;
border: none;
color: white;
}
.arrow{
position: absolute;
border: none;
left: 50%;
width: 30px;
height: 30px;
margin-left: -15px;
margin-top: 10px;
background-color: black;
color: white;
border-radius: 50%;
}
<div id="container">
<div id="hero">
<span>hero headline so cool buy now</span>
</div>
<button type="button" class="cta">Button Tex bla bla</button>
<button type="button" class="arrow">V</button>
<div id="content">
<span>give me more money</span>
</div>
</div>
I would use style tag relative position and offset the top by half of the buttons length. And yes use the z-index to place it on top.
<div id="hero">
<!-- This is the black background -->
</div>
<button type="button" class="cta" style="position:relative; top: -20px;">Button Tex bla bla</button>
<button type="button" class="arrow" style="position:relative; top: -20px;"><img src="..."></button>
<div id="content">
<!-- This is the white background -->
</div>
here you can do
.cta{
position:relative;
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
font-family: Arial;
color: #ffffff;
font-size: 24px;
padding: 10px 40px 10px 40px;
text-decoration: none;
}
.arrow{
position: absolute;
left: 110px;
top: 20px;
}
<div id="hero">
<!-- This is the black background -->
</div>
<button type="button" class="cta">
Button Tex bla bla
<a href="#" class="arrow">
<img src="http://files.softicons.com/download/toolbar-icons/super-mono-sticker-icons-by-double-j-design/png/64/arrow-down.png">
</a>
</button>
<div id="content">
<!-- This is the white background -->
</div>
use position:relative; on parent element and position:absolute; on child element
Here is my try :) - JSFiddle
I am basically wrapping the buttons in an absolute div button-wrapper ( absolute to the Hero ) then I just center its content using text-align:center
<div id="hero">
<h1>My Title</h1>
<div class="button-wrapper">
<button type="button" class="blue cta">Button Tex bla bla</button>
<button type="button" class="arrow"><span>↓</span>
</button>
</div>
</div>
<div id="content">
<!-- This is the white background -->
</div>
#hero {
background:#000;
height: 300px;
text-align:center;
}
h1 {
color:white;
padding: 50px;
}
button {
display: block;
position: relative;
margin: 0 auto;
}
.button-wrapper {
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}
#content {
background-color:yellow;
height:500px;
z-index:10;
}
.blue {
background: #0185CB;
color:#fff;
}
.cta {
border: 0;
font-size: 25px;
padding: 15px;
-webkit-transform: rotate(-358deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(-358deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(-358deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(-358deg) scale(1) skew(0deg) translate(0px);
}
.arrow {
background: #000;
border-radius: 50%;
width: 50px;
height: 50px;
border-color: transparent;
color: #fff;
font-weight: bold;
font-size: 25px;
line-height: 25px;
text-align: center;
margin-top: -20px;
}
.arrow > span {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
Are the two buttons doing the same thing? If yes, you should use only one button.
You can try this since you are using bootstrap:
HTML
<div id="content">
//container fluid will always have full width of its parent
<div class="container-fluid" id="my-button-wrapper">
//you create a row in order to manage the div inside
<div class="row">
//create a column as wide as you want and push it to center it
<div class="col-sm-8 col-sm-push-2">
//then you add the button
<button type="button" class="my-button-class">Button text</button>
</div>
</div>
</div>
</div>
CSS
#my-button-wrapper {
margin-top: -20px;
}
//give the position relative in order to position the arrow at its center
.my-button-class {
background: #000;
position: relative;
}
//this will add an element after the button content
.my-button-class:after {
position: absolute;
width: 30px;
height: 30px;
bottom: -15px;
left: 50%;
margin-left: -15px;
background-image: url('your-image-url');
content: "";
}
Of course width and height of my element are just for example, you should use your own sizes or bootstrap's ones.