I have problem with write code which will display presented situation as in the examples below. It is about triangles, they should contact one of the vertices (
not necessarily on half the page, it would be 60/40). While the triangles are not a big problem, that responsively is a challenge for me. On the background I would like put img (maybe like background-image, maybe like diferrent layer + mask with overlay: hidden).
Model 1:
Model 2:
What I was tray so far:
<style>
.section1::after {
width: 0;
height: 0;
right: -200px;
position: absolute;
top: 0;
z-index: -1;
border-style: solid;
border-width: 0 0 795px 750px;
border-color: transparent transparent #fddfc0 transparent;
}
.section1 .img-right {
position: absolute; right: 0; top: 0;
}
.section2 {
background-color: #fddfc0;
height: 670px;
background-image: url(../img2.png);
}
.section2 .trapezoid {
border-bottom: 670px solid white;
border-left: 714px solid transparent;
width: 100%;
position: absolute;
right: 0;
}
</style>
<div class="section1">
<div class="text">
text
</div>
<div class="img-right"><img src="img.png" alt="" /></div>
</div>
<div class="section2">
<div class="trapezoid">
text
</div>
</div>
As you see i tried two methods. Section1 with ::after pseudoelement which display triangle on the right and section2 where I put trapezoid on top which masks section2 div. As I said, my problem is how to make it responsive.
Related
I have a div container called wrapper2 that contains something like a chat. There are like 5 messages in div container called chatleft which contain pictures, the div wrapper2 is smaller than all the messages together.
That means I would need a time based automated animation that scrolls down the messages from top to bottom. Just like when the page opens, after 5 seconds the animation should start and need 10 seconds to scroll down to the last message at the bottom.
Do I need javascript for it, or is it possible to animate it in CSS, if I need to time the animation?
Can you help me to get it animated?
Here's the div wrapper2
#wrapper2 {
margin: 0;
padding: 40px;
float: left;
height: 740px;
width: 600px;
background-color: #fff;
border-top: 7px solid #000CFF;
border-left: 7px solid #000CFF;
border-right: 7px solid #000CFF;
bottom: 0px;
background-image:
url(https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg)
}
.chatleft:after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 24px solid transparent;
border-right-color: #ccc;
border-left: 0;
margin-top: -24px;
margin-left: -24px;
}
.chatleft:after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 24px solid transparent;
border-right-color: #ccc;
border-left: 0;
margin-top: -24px;
margin-left: -24px;
}
<div id="wrapper2">
</div>
<div class="chatleft">
<p>Hi, <br> here's the text:
</p>
</div>
<div class="chatleft">
<img src="../bilder/smartwatch.png">
</div>
<div class="chatleft">
<img src="../bilder/smartwatch.png">
</div>
<div class="chatleft">
<img src="../bilder/smartwatch.png">
</div>
<div class="chatleft">
<img src="../bilder/smartwatch.png">
</div>
</div>
I'm not aware of any way to do what you want with CSS.
I always use the scroll function in js
element.scroll(x-coord, y-coord)
More documentation here
You can pair that with ↓ to get what you want
setTimeout(
function(){
// do stuff (propably scroll in your case)
},
[time in miliseconds]
)
The JQuery library is really handy for animations too
$("html, body").animate({
scrollTop: "500px"
});
I've created the following banner below, using a triangle and rectangle in order to create the banner required over the image. However if the user zooms in on the browser these two containers have a gap between them. Any ideas how I could fix the two containers together or is there a better approach to writing this banner in general using CSS? Thanks in advance! :)
Code:
<html>
<style>
#triangle {
width: 0;
height: 0;
border-bottom: 150px solid red;
border-right: 50px solid transparent;
top: 8px;
position: relative;
}
#square {
background-color:red;
height:150px;
width:300px;
z-index: 3;
margin-left: 8px;
top: 8px;
position: relative;
color: white;
}
.align div {
display:inline-block;
float: left;
}
</style>
<div class="img">
<img src="IMAGE HERE" alt="test" width="800" height="150">
</div>
<div class="align">
<div id="square">
<h1>
Headline
</h1>
<p>
Some text here!
</p>
</div>
<div id="triangle"></div>
</div>
</html>
I did not see any white space between the rectangle and the triangle on my browser. However I cleaned your code so you can try this :
#triangle {
width: 0;
height: 0;
border-bottom: 150px solid red;
border-right: 50px solid transparent;
top: 8px;
position: relative;
}
#square {
background-color:red;
height:150px;
width:300px;
z-index: 3;
margin-left: 8px;
top: 8px;
position: relative;
color: white;
}
.align div{
display:inline-block;
float: left;
}
.align {
min-width:450px;
}
<div class="align">
<div id="square">
<h1>
Title
</h1>
<p>
Some text here.......
</p>
</div>
<div id="triangle"></div>
</div>
EDIT : Fixed the align at 400% zoom. Added min-width to .align .
This problem is browser dependent and not all browsers showing same problem. Chrome may show perfect but mozilla might show problem. Also, Use reset css to avoid any browser dependent css property.
I am putting together a slideshow for a CMS, this slideshow has some tolerance for a range of image dimensions. Unfortunately I am unable to wrap all the images in a border.
See the image to better understand the problem.
Please check this, hope this will work for you.
.slider_container {
position: relative;
}
.slider_container img {
position: relative;
width: 100%;
}
.slider_container .border_box {
position: absolute;
border: 3px solid #fff;
left: 5px;
right: 5px;
top: 5px;
bottom: 10px;
}
<div class="slider_container">
<img src="http://www.electricprism.com/aeron/slideshow/images/1.jpg" alt="">
<div class="border_box"></div>
</div>
I am trying to create a div with a background image (background-size:cover) with this shape cut out in the center top of the div.
The div above the div I want to cut this shape out of has background-image:cover on it as well. I'm trying to do this with a CSS shape, moving the lower div up using a negative margin top, so the background image on the div above shows through the cut out shape.
Note: The shape has to look identical or almost identical to the image, as it is part of a site designed by someone else, and they are very specific with their designs.
Anyone out there know how to create this shape?
EDIT: #SZenC offered a really cool solution that I implemented, except it leaves me with colored shapes overlayed on top of background images. See image:
I need the light blue pattern to show through where the gray is, and the purple texture to show through where the white is. I'm not sure at this point if this is possible, at least with CSS.
The best solution using CSS would be to use some nested elements.
You could create a div (.pointy) with two other divs inside it (.curve-left & .curve-right).
The inner divs should be sided so that they each have half of the curve. So if your curve drops 10px and goes 20px horizontal, it's height should be 10px and the width 20px. Then give it a border radius in the top-left or top-right corner of 100%. Now the curve will go trough the entire div. You could then give it a gray background-color and the parent div white in the background. Then some simple CSS-tricks to center the .pointy-div and do the backgrounds, and voila, there is your curvy triangle-y thingy.
So example below.
#c1 {
position: relative;
width: 200px;
height: 190px;
overflow: hidden;
}
#c2 {
position: relative;
top: 0px;
width: 200px;
height: 200px;
background-color: gray;
}
.pointy {
position: absolute;
top: 0px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 10px;
background-image: url("http://lorempixel.com/output/technics-q-c-200-200-4.jpg");
background-position:center bottom;
}
.pointy>.curve-left,
.pointy>.curve-right{
position:absolute;
background-color:red;
width:20px;
height:10px;
background-image:url("http://lorempixel.com/output/technics-q-c-200-200-1.jpg");
}
.pointy>.curve-left{
border-top-right-radius:100%;
background-position:120px 0;
left:0;
}
.pointy>.curve-right{
border-top-left-radius:100%;
background-position:80px 0;
right:0;
}
<div id="c1">
<img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" />
</div>
<div id="c2">
<div class="pointy">
<div class="curve-left"></div>
<div class="curve-right"></div>
</div>
<img src="http://lorempixel.com/output/technics-q-c-200-200-1.jpg" />
</div>
Here you could use a couple of pseudo elements with border radius to create that curved shape.
note there are multiple elements in this demo to show how this could be used in practice
.image {
height: 300px;
width: 80%;
background: url(http://lorempixel.com/900/500);
position: relative;
display: inline-block;
}
.shape {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: url(http://lorempixel.com/900/400);
background-position: 0 60px;
}
.shape:before,
.shape:after {
content: "";
position: absolute;
background: inherit;
height: 100%;
top: 0;
width: 50%;
transform: translateY(-100%);
}
.shape:before {
left: 0;
border-radius: 0 50% 0 0;
background-position: 0 90px;
}
.shape:after {
left: 50%;
border-radius: 50% 0 0 0;
background-position: -100% 90px;
}
<div class="image">
<div class="shape"></div>
</div>
Another, more in practical approach (with responsiveness), would be something like:
.wrap{
width:100%;display:inline-block;
position:relative;
height:600px;
}
.wrap img:first-child{
top:0;z-index:5;
}
.wrap img:last-child{
top:40%;
}
.wrap img{
position:absolute;
height:50%;width:100%;
}
.wrap .splitter{
z-index:10;
position:absolute;
top:40%; width:100%;
height:10%;
}
.wrap .splitter:before, .wrap .splitter:after{
content:"";
position:absolute;
width:50%;
height:100%;
background-size:200% 500%;
border-radius: 0 100% 0 0;
}
.wrap .splitter:after{
left:50%;
background-position:-100% 0;
border-radius: 100% 0 0 0;
}
.wrap .partA:before, .wrap .partA:after{ background-image:url("http://lorempixel.com/450/250");}
<div class="wrap">
<img src="http://lorempixel.com/900/500"/>
<span class="splitter partA"></span>
<img src="http://lorempixel.com/450/250"/>
</div>
I have a big image with a dark overlay covering the front of my webpage. I want to add a div filled with bright text on top of the overlay.
Is there a way to position the div so as to exclude it from the overlay?
HTML:
.overlay {
position: absolute;
background-color: rgba(0, 0, 0, 0.45);
top: 70px;
left: 0px;
right: 0px;
bottom: -200px;
z-index: 1;
}
.about-us {
background-image: url("img.jpg");
width: 1100px;
height: 731px;
display: block;
position: relative;
}
<div class="about-us">
<div class="overlay">
<div class="intro">
<h2>Catchy title</h2>
<p>Small Para</p>
<h1>More txt</h1>
</div>
</div>
</div>
Something like this:
h2 {
background-color: white;
z-index: 2;
}
Assuming that was what you wanted on top.
Use a pseudo element instead of an overlay element.
.about-us:before {
content:"";
position: absolute;
background-color: rgba(0,0,0,0.45);
top: 70px;
left: 0px;
right: 0px;
bottom: -200px;
}
Also you need to explicitly specify position property for intro element in able to interact with the content:
.intro {
position: relative;
}
See example here