I'm trying to create a skewed section with a picture background. The point is that I want this background with the skew of the parent cancelled. I tried to achieve this with a pseudo-element.
I don't understand why the overflow:hidden of the parent does not affect the ::after element. Could someone help?
.main::after {
content:"";
background: url("https://images.unsplash.com/photo-1420310414923-bf3651a89816?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=47f355d1a7520ad5f1718e9388dd4967");
background-size:cover;
position:absolute;
display:block;
width: 110%;
height:110%;
transform: rotateZ(5deg) skew(5deg);
Here is the code and example: http://codepen.io/anon/pen/jWEZxK
Thanks in advance
Chris.
Try to this
Demo
* {
margin:0;
padding:0;
/*height:100%;*/
}
body {
background: #272727;
}
section {
width:100%;
min-height:500px;
transform: rotateZ(-5deg) skew(-5deg);
}
.main {
background-color: crimson;
overflow:hidden;
position:relative;
z-index:1;
}
.main::after {
content:"";
background: url("https://images.unsplash.com/photo-1420310414923-bf3651a89816?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=47f355d1a7520ad5f1718e9388dd4967");
background-size:cover;
position:absolute;
display:block;
left:-10%;
right:-10%;
top:-10%;
bottom:-10%;
transform: rotateZ(5deg) skew(5deg);
z-index:2;
}
<section class="main">
</section>
the after pseude needs the same deffinitions as parent element .. to we just repeat declarations..
http://codepen.io/mkdizajn/pen/GogQev?editors=110
overflow:hidden;
transform: rotateZ(0deg) skew(0deg); }
cheers :)
Related
I have a problem with my website slider images. I set my slider wrap and slider inner frame width to 100% but when I change the screen size the images size does not change. Also I set the images width to max-width:100% and the height of them to auto.
#sliderFrame {
position:relative;
width:100%;
margin: 0 auto; /*center-aligned*/
}
#slider, #slider div.sliderInner {
width:1280px;height:auto;/* Must be the same size as the slider images */
border-radius: 6px;
}
#slider {
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
transform: translate3d(0,0,0);
box-shadow: 0px 1px 5px #999999;
}
#slider a.imgLink, #slider .video {
z-index:2;
cursor:pointer;
position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
#slider div.loading {
max-width:100%; height:auto;
background:transparent url(loading.gif) no-repeat 50% 50%;
filter: alpha(opacity=60);
opacity:0.6;
position:absolute;
left:0;
top:0;
z-index:9;
}
#slider img, #slider>b, #slider a>b {
position:absolute;
border:none;
display:none;
max-width:100%;
height:auto;
}
#slider div.sliderInner {
overflow:hidden;
-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
position:absolute;
top:0;
left:0;
max-width:100%;
height:auto;
}
<div id="sliderFrame">
<div id="slider">
<img src="image/Index_1600x500.jpg" alt="#cap1"/>
<img src="image/Index_TrackerPnale_1600x500.jpg"/>
<img src="image/Index_HyundaiSantafe_1600x500.jpg" alt="#cap2"/>
<img src="image/Index_Support.jpg" title="Support Team"/>
<img src="image/Index_SocialMedia_1600x500.jpg" title="Social Medias"/>
</div>
</div>
Your CSS doesn't really say much about your HTML - Also, we have no clue on what you really mean by slider - But follow this fiddle: https://jsfiddle.net/p3r1x5sj/ and see the very minimal CSS you're looking for.
#sliderFrame {
width:100%;
height:100px;
position:relative;
}
#sliderFrame #slider {
width:100%;
height:100%;
position:relative;
background:#fff url(loading.gif) no-repeat 50% 50%;
box-shadow: 0px 1px 5px #999999;
}
#sliderFrame #slider img {
width:100%;
position:absolute;
top:0;
left:0;
}
The img tags are what you have to control. Also, unless you crop the images using overflow:hidden; on your outermost container, the images may be all different heights. In this case you may want to consider using divs with background-images
HTML FILE:
<div class="one">
<div class="two">
<h2>ITEM NAME</h2>
</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
}
.one{
display:block;
position: relative;
margin-left:auto;
margin-right:auto;
width:50%;
height:325px;
background-image: url('http://hd.wallpaperswide.com/thumbs/lion_5-t2.jpg');
background-size:cover;
}
.two{
position:absolute;
display:inline-block;
width:100%;
height:100%;
background-color: gray;
transition: all 0.3s ease-out;
}
.two h2{padding-top: 20%;}
I want to make a hover transition effect, just like this website:
Here
You can see in portfolio when you hover the link another light-blue div expands. I guess it's using transform: scale() I tried to do something like that, but the second div is overpassing the size of the parent div. How may I fix that? What am I doing wrong?
Also, I have my codepen sample.
The image of the lion you are using has a transparent background which appears along the edges, giving the impression that div one is actually smaller than it is. Set the background on the div one to a background colour instead of an image, and you will see what i mean.
i holp to help:
.one{
display:block;
position: relative;
margin-left:auto;
margin-right:auto;
width:510px;
height:330px;
background-image: url('http://hd.wallpaperswide.com/thumbs/lion_5-t2.jpg');
background-size:cover;
border:1px solid blue;
}
.two{
position:absolute;
display:block;
width:10%;
height:10%;
background-color: gray;
transition: all 0.3s ease-out;
margin-left:50%;
margin-top:30%;
opacity:0;
border-radius:100px;
}
.two h2{margin-top: 20%; margin-left:20%;}
.one:hover .two{
display:inline-block;
opacity: 1;
width:100%;
height:100%;
-webkit-transform: scale(1);
margin:0px !important;
border-radius:2px !important;
}
I want this: http://gyazo.com/0fe69e349ed5cd4e72a08ed8e60af5d4
But I can't manage to achieve it.
I can not change the image.
I have used an image as a mask, but that gives me this: http://gyazo.com/b69e840d095212bce422252cec081fe9
Is there a way to make the side parts white aswell?
My code:
#section1{
height:275px;
width:100%;
background-image: url('/img/paral1.jpg');
background-position: center top;
background-repeat:no-repeat;
background-size: 100% 916px;
}
.overlay{
position: absolute;
margin-top:180px;
height:100px;
width:100%;
overflow: hidden;
}
.mask{
margin: 0 auto;
background-image: url('/img/section1.png');
height:100px;
width:1080px;
background-size:100% 100%;
}
edit: JSfiddle: http://jsfiddle.net/31kxqmLt/
JSfiddle in fullscreen: http://jsfiddle.net/31kxqmLt/embedded/result/
edit edit: The mask must have a width of 1080px and the rest of the space should be white.
I made this Html/css example of the shape you are trying to make.
It uses background image, pseudo elements and skewX to give the transparent cut out effect on bottom left and bottom right. It also is responsive :
DEMO
output :
.wrap {
width:100%;
padding-bottom:30%;
position:relative;
}
.wrap:before {
content:'';
background-image: url(http://i.imgur.com/ug3M32a.jpg);
background-size:100% auto;
position:absolute;
width:100%;
left:0;
height:50%;
}
.b{
position:absolute;
bottom:0;
width:50%; height:50%;
}
.l{
left:5%;
transform-origin: 0 0;
transform: skewX(45deg);
overflow:hidden;
border-bottom-left-radius:3%;
}
.r{
right:5%;
transform-origin: 100% 0;
transform: skewX(-45deg);
overflow:hidden;
border-bottom-right-radius:3%;
}
.l:before, .r:before{
content:'';
display:block;
width:100%; height:100%;
background-size: 200%;
background-image: url(http://i.imgur.com/ug3M32a.jpg);
}
.l:before{
background-position: 10% -100%;
transform-origin: 0 0;
transform: skewX(-45deg);
}
.r:before{
background-position: 90% -100%;
transform-origin: 100% 0;
transform: skewX(45deg);
}
body {
padding:20px 10%;
background-image : url(http://i.imgur.com/k8BtMvj.jpg);
background-size:cover;
}
<div class="wrap">
<div class="b l"></div>
<div class="b r"></div>
</div>
Js fiddle
full screen
Js fiddle
edited the mask image
set mask width to 100% so that it fits in all the resolutions
.mask{
margin: 0 auto;
background: url('http://s29.postimg.org/5g7z03ypz/image.png') no-repeat bottom;
height:100px;
width:100%;
background-size:100% auto;
}
for smaller resolution min-width 300
#section1{
max-height:200px;
min-height:30%;
overflow:hidden;
position:relative;
}
JS Fiddle
I'd like the triangle shape at the foot of this page to be a solid colour with no transparency. Is this easy to achieve? I'm just not sure which element to target.
Here is my JSFiddle: http://jsfiddle.net/webtiki/fcLkW/9/
and my code :
css
html, body{
height: 100%;
margin:0;
}
.out{
height:100%;
position:relative;
overflow:hidden;
}
.in{
height:75%;
background-color:#6C2223;
}
.out:before, .out:after, .in:after{
content:'';
position:absolute;
bottom:25%;
width:100%;
height:700%;
background-color:#9A4445;
}
.out:before{
right:50%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform : rotate(-45deg);
transform : rotate(-45deg);
}
.out:after{
left:50%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform : rotate(45deg);
transform : rotate(45deg);
}
.in:after{
bottom:0;
width:100%;
height:25%;
background-color:#911618;
z-index:-1;
}
video{
min-width:100%;
min-height:100%;
height:auto;
width:auto;
position:absolute;
top:0;
z-index:10;
opacity:0.5;
}
html
<div class="out">
<div class="in"></div>
<video autoplay="" loop="" poster="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/home-vid-img.jpg" id="bgvid">
<source src="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/homepage.webm" type="video/webm">
<source src="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/shutterstock_v3702740_4.m4v" type="video/mp4">
</video>
</div>
Can someone assist?
Many thanks for any pointers :-)
I think I got what you want. Change your CSS code with this (JSFiddle code):
html, body{
height: 100%;
margin:0;
}
.out{
height:100%;
position:relative;
overflow:hidden;
}
.in{
height:75%;
background-color:#6C2223;
}
.out:before, .out:after, .in:after{
content:'';
position:absolute;
bottom:25%;
width:100%;
height:700%;
background-color:#9A4445;
}
.out:before{
right:50%;
z-index:20;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform : rotate(-135deg);
transform : rotate(-135deg);
}
.out:after{
left:50%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform : rotate(315deg);
transform : rotate(315deg);
}
.in:after{
bottom:0;
width:100%;
height:25%;
background-color:#911618;
z-index:-1;
}
video{
min-width:100%;
min-height:100%;
height:auto;
width:auto;
position:absolute;
top:0;
z-index:10;
opacity:0.5;
}
The thing that you have done is put the video as the top element and reduced the opacity to show items behind it.
what you would need to do is change the following 2 values on the bottom and left/right shapes.
z-index: 20;
opacity: 0.5;
After doing this though as the bottom 1 is a whole block, it covers the whole video, may have to rethink your shapes, or use an image overlay.
http://jsfiddle.net/fcLkW/21/
You need just set the triangle to top layer, because now the block "DIV.inn" is under video, and you see it through transparent video.
Change your code like:
CSS
.out:before, .out:after, .in:after{
content:'';
position:absolute;
bottom:25%;
width:100%;
height:700%;
background-color:#9A4445;
z-index:1000;
}
Sorry for my english.
I have a problem. I need to create a DIV inside another DIV, which has to have a white background. I tried using skew, but It didnt work well.
Here is an image:
There are at least several ways to achieve this, however the simplest way may be using linear-gradient background. Its quality is not really good compared with others but it's totally acceptable.
Try this:
div {
width:600px;
height:300px;
background:teal;
border:1px solid teal;
}
.top {
width:100%;
height:100px;
font-size:25px;
padding-left:30px;
background:linear-gradient(175deg, white 60%, transparent 62%);
border:none;
box-sizing:border-box;
}
HTML:
<div>
<div class='top'>Custom<br/>Home</div>
</div>
Demo.
You can do that with a pseudo element and transform rotate :
DEMO
HTML :
<div id="header">
Custom<br/>
Home
</div>
<div id="content"></div>
CSS :
#header{
background:#fff;
position:relative;
height:50px;
z-index:1;
font-size:30px;
padding-left:10%;
}
#header:before{
content:'';
position:absolute;
bottom:0;
right:0;
width:110%;
height:1000%;
background:inherit;
z-index:-1;
border-bottom:2px solid #636A6E;
-webkit-backface-visibility: hidden; /* to fix pixelisation in chrome */
-ms-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
transform-origin:100% 100%;
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
#content{
min-height:500px;
background:#778385;
}
Since you need the border in your diagonal div, try this:
CSS:
.logo {
width:110%;
height:147px;
top:-10%;
left:-14px;
border:2px solid black;
position:absolute;
background:#fff;
transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
/* IE 9 */
-webkit-transform:rotate(-7deg);
/* Opera, Chrome, and Safari */
}
.container {
width:100%;
height:612px;
overflow:hidden;
background:#7b8284;
position:relative;
}
.inner {
position:absolute;
height:200px;
transform:rotate(7deg);
-ms-transform:rotate(7deg);
/* IE 9 */
-webkit-transform:rotate(7deg);
/* Opera, Chrome, and Safari */
padding:20px 90px;
top:30%;
font-size:30px;
}
HTML:
<div class="container">
<div class="logo">
<div class="inner">My Logo</div>
</div>
</div>
Demo: http://jsfiddle.net/lotusgodkk/BKfe9/1/
You can modify the top,left,font-size,background-color,transform, border as per your need
If you want to do it in pure CSS I would recommend using the transform: rotate(xxx) feature of CSS3. I've created a JS-Fiddle that will help you get started (not the best solution...), it is not based on your fiddle: http://jsfiddle.net/syTu7/
I think I understand your question, I think my example will help
HTML
<div class="wrapper">
<div class="innter">some text</div>
</div>
CSS
.wrapper {
position: relative;
width: 960px;
margin: 0 auto;
background: #ddd;
min-height: 100%;
height: 800px;
}
.innter {
height: 500px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #ececec;
}
In HTML,
<div class="wrapper">
<div class="inner">some content</div>
</div>
In CSS,
.inner {
background: #fff;
}