I am trying to create a responsive header that has two adjacent background images, split diagonally.
The placement of the angle should be adjustable like so:
Most of the ways that this can be done result in the background image becoming skewed, using transparent borders that are not responsive or using clip-path, which unfortunately lacks browser support for ie.
.one,
.two {
flex: 1 1 auto;
}
.spotlight {
height:350px;
overflow:hidden;
}
.one, .two {
background: url(https://via.placeholder.com/150);
transform: skewX(-20deg)
}
.one {
}
.two {
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex spotlight">
<div class="one">a</div>
<div class="two">a</div>
</div>
codepen
Are there any other alternative ways of going about this?
body {
overflow:hidden;
}
.view {
bottom:0;
left:0;
position:absolute;
right:0;
top:0;
-ms-transform:skew(-5deg);
-o-transform:skew(-5deg);
-moz-transform:skew(-5deg);
-webkit-transform:skew(-5deg);
transform:skew(-5deg);
}
.left,
.right {
bottom:0;
overflow:hidden;
position:absolute;
top:0;
}
.left {
left:-5%;
right:50%;
}
.right {
left:50%;
right:-5%;
}
.img {
bottom:-5%;
left:-5%;
position:absolute;
right:-5%;
top:-5%;
-ms-transform:skew(5deg);
-o-transform:skew(5deg);
-moz-transform:skew(5deg);
-webkit-transform:skew(5deg);
transform:skew(5deg);
}
.left-img {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/sun.jpg);
background-position:center center;
background-size:cover;
}
.right-img {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/moon.jpg);
background-position:center center;
background-size:cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="view">
<div class="left">
<div class="img left-img"></div>
</div>
<div class="right">
<div class="img right-img"></div>
</div>
</div>
</body>
</html>
Adjust position as you want on .right and .left class
Related
I have a black overlay on the image and disabled image hover, I know it is stacked on the image but how I can solve this? I wanna hover the image and grayscale change from 1 to zero and overlay still there, my code down below
thanks for your help.
.box{
width:300px;
height:200px;
position: relative;
}
.image{
width:100%;
height:100%;
object-fit: cover;
filter:grayscale(1);
}
.image:hover{
filter:grayscale(0)
}
.black_layer{
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:black;
z-index:1;
opacity:.3;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="box">
<img src="https://images.unsplash.com/photo-1616578738046-8d6bbb4ee28e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" class="image" />
<div class="black_layer"></div>
</div>
</body>
</html>
Instead of hover on the image (what will never work because of the black layer on top of it), hover on the container .box and than target the content image:
.box:hover img{ .... }
(note: changed the backgroundcolor of the top layer to yellow to make the effect more visable)
.box{
width:300px;
height:200px;
position: relative;
}
.image{
width:100%;
height:100%;
object-fit: cover;
filter:grayscale(1);
}
.box:hover img{
filter:grayscale(0)
}
.black_layer{
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:yellow;
z-index:1;
opacity:.3;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="box">
<img src="https://images.unsplash.com/photo-1616578738046-8d6bbb4ee28e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" class="image" />
<div class="black_layer"></div>
</div>
</body>
</html>
I would like to place the middle portion div on top for a #media query -- and then I would like to stack the left portion and right portion divs below it side by side for a responsive and clean looking design, possibly for mobile as well.
Here is my code -- any help would be greatly appreciated! Thanks.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href="needhelpagain.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Arvo|Josefin+Slab|Lato|Old+Standard+TT|Open+Sans|PT+Sans|PT+Serif|Roboto|Ubuntu|Vollkorn|Dancing+Script">
<title></title>
</head>
<body>
<header></header>
<div class="container">
<div class="left-portion"></div>
<div class="middle-portion">Blank Content</div>
<div class="right-portion"></div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background-color:#1a0000;
}
.container{
margin:auto;
width:80%;
overflow:hidden;
background-color:white;
}
header{
padding:50px;
background-color:#000000;
}
.left-portion{
width:22%;
height:1200px;
float:left;
background-color:#fff3e5;
}
.middle-portion{
width:56%;
height:100%;
float:left;
background-color:#ffffff;
color:#000000;
font-family:'old standard tt';
text-align:center;
}
.right-portion{
width:22%;
height:1200px;
float:left;
background-color:#fff3e5;
font-family:'vollkorn';
}
You may be able to get away with making the div on top you have it labeled as left .. Make that 100% width then the other 2 divs set as 50% and the set all of the divs in the container to position relative. And the bottom divs to float left.
<style>
.container{
height: 1200px;
width: 100%;
}
.container div{
position: relative;
}
.topDiv{
width:100%;
height:100px;
}
.botDivs{
width:50%;
height: 200px;
float: left
}
.green{
background:green;
}
.red{
background:red;
}
.blue{
background:blue;
}
</style>
<div class="container">
<div class="topDiv red"></div>
<div class="botDivs green"></div>
<div class="botDivs blue"></div>
</div>
I have a row split in 4 columns on a footer section, in the last column to the right I want to add something like the picture attached, but I want to preserve the look of the image and text together along all screens sizes, with what I have only works for smaller screens, and the wider the screen gets, the image and the text separate each other apart too much. How can I achieve this?
.wrapper {
position:relative;
text-align:center;
margin:0 auto;
}
.footer {
font-size:40px;
color:black;
}
.talk {
position:absolute;
text-align:left;
bottom:0;
}
.footer-logo {
vertical-align: bottom;
float:right;
height:150px !important;
}
<div class="wrapper">
<p class="footer talk">Big Text</p>
<img class="footer-logo" src='http://via.placeholder.com/140x100'>
</div>
you can simply set the display of 'image' and the 'text' element to :inline
or chage the < p > tag to < span >,
because < p > tag takes the whole line and they couldn't take place together!
but < span > tag is an inline element which takes the content width (and not the screen width)
here is a useful explanation about "display" property.
.wrapper {
display: block;
position:absolute;
right:0;
bottom:0;
text-align:center;
margin:0 auto;
}
.footer {
display: inline;
}
.talk{
font-size:40px;
color:black;
}
.logo{
height: 150px;
width: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
<span class="footer talk">Big Text</span>
<img class="footer logo" src='http://via.placeholder.com/140x100'>
</div>
</body>
</html>
You can try This Code.
I'am add some media queries and some div to in html page
Html
<div class="wrapper">
One Columns
</div>
<div class="wrapper">
two Columns
</div>
<div class="wrapper">
three Columns
</div>
<div class="wrapper">
<div class="A">
<p class="footer talk">Big Text</p>
<img class="footer-logo" src='http://via.placeholder.com/140x100'>
</div>
</div>
CSS
.wrapper {
position:relative;
text-align:center;
margin:0 auto;
width:25%;
float:left;
}
.footer {
font-size:40px;
color:black;
}
.talk {
position:absolute;
text-align:left;
width:50%;
float:left;
}
.footer-logo {
vertical-align: bottom;
float:right;
height:150px !important;
width:50%;
float:right;
}
.A{
width:100%;
}
#media (max-width:525px){
.A{
width:100%;
}
.footer-logo {
width:20%;
float:right;
}
.talk {
width:20%;
float:left;
font-size:28px;
}
}
I want to make a box(in a form of div) that could arrange and move around objects in.
But, when I try to make objects to alight to left they pop out of it.
How can I fix this issue?
#slide
{
margin: 100px 100px;
background:green;
height:200px;
width:100px;
overflow: hidden;
clear:both;
}
Try this(replace your class)
Edited found the answer:
just add position:relative;
to #slide in css file
HTMl
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="slide">
<div id="right">
</div>
<div id="left">
</div>
</div>
</body>
Css
#slide
{
margin: 100px 100px;
background:green;
height:200px;
width:100;
}
#right
{
top:40%;
height:20px;
width:20px;
background:black;
right:0;
position:absolute;
}
#left
{
top:40%;
height:20px;
width:20px;
background:black;
left:0;
position:absolute;
}
Hello I am trying to vertical and horizontally align 4 divs inside each other with CSS but nothing is working for me.
Please help me! Thanks in advance
My CSS Please note this is just 1 method ive tried I have been sitting here for about 2 hours messing with this and couldnt figure it out.
* {
margin:0px;
padding:0px;
}
body {
background-color:#454545;
}
.wrapper {
margin:auto;
width:960px;
}
.circle-wrapper {
height:918px;
width:918px;
background-image:url(images/overlay.png);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:absolute;
text-align:center;
margin:auto;
}
.outer-inner-background {
background-image:url(images/center-circle.GIF);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:relative;
height:494px;
width:494px;
margin:auto;
}
.outer-inner-rings {
background-image:url(images/inner-outer-rings.PNG);
background-size:cover;
background-position:center center;
position:relative;
width:494px;
height:494px;
margin:auto;
}
.inner-image {
position:relative;
height:308px;
width:308px;
margin:auto;
}
My HTML: I don't care if the structure changes it just needs to work
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Untitled Document</title>
</head>
<body>
<div class="wrapper">
<div class="circle-wrapper">
<div class="outer-inner-background">
</div>
<div class="outer-inner-rings">
</div>
<div class="inner-image">
<img class="inner-img" src="images/inside-image.PNG" width="308px" height="308px">
</div>
</div>
</div>
</body>
</html>
here my try http://dabblet.com/gist/4013306
code:
css
div {overflow:hidden}
#first {
background:red;
width:400px;
height:400px;
border-radius:300px;}
#second {
background:grey;
height:95%;
width:95%;
border-radius:300px;
margin:2.5%}
#third {
background:green;
height:70%;
width:70%;
border-radius:200px;
margin:15%;}
#forth {
background:black;
height:95%;
width:95%;
border-radius:200px;
margin:2.5%;}
html
<div id="first">
<div id="second">
<div id="third">
<div id="forth"></div>
</div>
</div>
</div>
Try using position: relative; on the container, and position: absolute; on the circles with suitable left and top values to place them in the middle.
Well, you can use absolute positioning in your inner divs where left and top positions are always set to (Parent element width - child element width /2). Here's my code
html
<div id="red">
<div id="grey">
<div id="green">
<div id="black">
</div>
</div>
</div>
</div>
CSS
div
{
border-radius:100%;
}
#red
{
position:relative;
margin-left:auto;
margin-right:auto; /** centers #red on screen **/
background-color: #F00;
width:400px;
height:400px;
}
#grey
{
background-color:#CCC;
position:absolute;
top:20px;
left:20px;
width:360px; /** 400 - 360 = 40/2 = 20px for left and top **/
height:360px;
}
#green
{
background-color:#0E0;
position:absolute;
top:40px;
left:40px;
width:280px;
height:280px;
}
#black
{
background-color:#000;
position:absolute;
left:20px;
top:20px;
width:240px;
height:240px;
}
Here's the fiddle:
http://jsfiddle.net/brunovieira/pmN4z/
Fiddle with #red centered on screen:
http://jsfiddle.net/brunovieira/pmN4z/2/
Does it need to be 4 divs? try this:
http://jsfiddle.net/vSyWZ/2/
HTML
<div class="outer">
<div class="inner"><div>
</div>
CSS
div{position:relative; margin:0 auto;}
.outer{width: 350px; height: 350px; background-color: gray; border-radius: 100%; border:10px solid red; vertical-align: middle;}
.inner{width: 200px; height: 200px; background-color: black; border-radius: 100%; border:10px solid green; top:60px;}
I tested on Chrome and Firefox and works fine, IE doesn't have support for rounded corners but it is centered.