I want to make a responsive slanted div such that the output will be as required output
plz help.
Try with this skew.
body {
height: 100vh;
margin: 0;
background: orange;
}
body:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: blue;
transform: skew(296deg);
transform-origin: top;
}
<body>
<div>
</div>
</body>
You can use a linear-gradient background, specifying direction right bottom. That will adjust to different aspect ratios.
Here's a simple example:
* {
margin: 0;
padding: 0;
}
.bg {
background-image: linear-gradient(to right bottom, blue 0 50%, navy 50% 100%);
height: 50vh;
width: 100vw;
}
<div class="bg"></div>
Related
I keep trying to accomplish a transparent gradient effect (thinking about white) around an image background, absolutely positioned maybe?, you can imagine what I'm talking about seing my explanatory paint.
You can create radial gradients in css with the radial-gradient function and make your elements rounded with border-radius.
.transparent-gradient {
width: 300px;
height: 300px;
border-radius: 50%;
display: inline-block;
position: relative;
overflow: hidden;
}
.transparent-gradient img {
min-width: 100%;
min-height: 100%;
vertical-align: middle;
}
.transparent-gradient::after {
content: "";
background-image: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
<div class="transparent-gradient">
<img src="https://images.unsplash.com/photo-1530279281203-4c60af01ee58?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=02b66d237286bcb2a071ed6c1e72adf3&auto=format&fit=crop&w=1950&q=80" width="400">
</div>
I want to create an overlay with css over one image like this:
but I only do a square overlay like this:
how I can make the first shape with css ??
here is my code:
.card-img-overlay {
position: absolute;
top: 0px;
right: 0px;
bottom: 0;
left: 150px;
padding: 1.25rem;
}
thank you for your answers :)
Check this out
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid #9020d1bb;
border-left: 100px solid transparent;
position: absolute;
}
#container {
position: relative;
}
#container #triangle-topleft,
#overlay {
position: absolute;
color: white;
right: 0;
}
<div id="container">
<div id="triangle-topleft"></div>
<div id="overlay">Microsoft</div>
</div>
I will go with a simple gradient and no need for any extra markup or the use of pseudo element:
body {
height: 100vh;
margin: 0;
background:
linear-gradient(to top right, transparent 50%, rgba(255, 0, 0, 0.5) 51%) 0 0/100% 200px no-repeat,
url(https://lorempixel.com/1000/1000/) center/cover;
}
div {
height:200px;
text-align:right;
color:#fff;
padding:10px;
font-size:25px;
}
<div>
<p>Some content</p>
</div>
I've created a triangle overlay over an image using borders.
HTML and CSS
.hp-product-item {
position: relative;
}
.hp-product-item img {
max-width: 500px;
width: 100%;
}
.hero-overlay {
position: absolute;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 120px 0 0 500px;
border-color: transparent transparent transparent #F9FAFB;
}
.hero-text {
position: absolute;
bottom: 10px;
left: 10px;
}
<div class="hp-product-item">
<img src="https://images.unsplash.com/photo-1516703914899-e8303d01329a?ixlib=rb-0.3.5&s=9ebf86cdab3a1c7319ff15b16d09b1f7&auto=format&fit=crop&w=1350&q=80">
<div class="hp-product-text">
<div class="hero-overlay"></div>
<div class="hero-text">
<h2>Test</h2>
<p>Testing this</p>
</div>
</div>
</div>
This works great, my only problem is responsiveness. So as the image gets smaller due to the 100% width the border becomes too big it overlaps and causes the layout to break. Now I could change the border-width with media queries but is there a better way to do this?
I've also created a fiddle
Use vw and vh instead of px so the units are relative to viewport size.
Just short example fiddle
You can use linear gradients instead of border that property supports percentage units, you will have to move outside your overlay... just like the example
FIDDLE
.hp-product-item {
position: relative;
display: inline-block;
}
.hp-product-item img {
max-width:500px;
width:100%;
}
.hero-overlay{
position:absolute;
bottom:0;
width: 100%;
height: 100%;
background: linear-gradient(19deg, #ffffff 25%, rgba(0,0,0,0) 25%);
}
.hero-text {
position: absolute;
bottom:10px;
left:10px;
}
Maybe you can try to set white background and to rotate class .hero-overlay?
Fiddle example
.hp-product-item {
max-width: 500px;
overflow: hidden;
position: relative;
}
.hp-product-item img {
width:100%;
}
.hero-overlay {
background-color: #f9fafb;
bottom: -230px;
height: 250px;
left: -100px;
position: absolute;
transform: rotate(15deg);
width: 1000px;
}
.hero-text {
position: absolute;
bottom:10px;
left:10px;
}
I try to put a line on only one word. With changing its size and its position.
Here the result I would like to have:
I tried to use a span with background-image but no success.
https://jsfiddle.net/XZKS/193u9dam/
And other problem, background-image don't work when using local image.
My website arborescence:
_include
css
style.css
js
img
line.png
background-image: url("../img/line.png");
I hope someone could help me, thanks
Try this:
.myWordWithLine {
position: relative;
}
.myWordWithLine::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
height: 24px; // your line height
background-color: red; // your line color
}
Method #01:
You can use css linear-gradient() to draw this background:
Steps:
Create background image with linear-gradient().
Adjust its size with css background-size property.
Place it at the bottom position of the element with background-position css property.
Necessary CSS:
.line {
background: linear-gradient(to right, green, green) no-repeat;
background-size: 100% 5px;
background-position: left bottom 5px;
}
h3 {
font-size: 24px;
}
.line {
background: linear-gradient(to right, green, green) no-repeat;
background-size: 100% 5px;
background-position: left bottom 5px;
position: relative;
padding-top: 0;
padding-bottom:0;
}
<h3>MY <span class="line">BLOG</span></h3>
Method #02:
You can use ::before OR ::after pseudo element:
h3 {
font-size: 24px;
}
.line {
position: relative;
}
.line::after {
background: green;
position: absolute;
bottom: 5px;
z-index: -1;
content: '';
left: 0;
right: 0;
height: 5px;
}
<h3>MY <span class="line">BLOG</span></h3>
You can use this
http://codepen.io/B101844/pen/bgLPPb
html
<div class="main">MY
<div class="blog">
BLOG
<div class="underline"></div>
</div>
</div>
Css
.main{
font-size: 30px;
color: #1c3d93;
font-weight: 900;
}
.blog{
display: inline-block;
position: relative;
}
.underline{
position: absolute;
background-color: #91dfcf;
left: 0px;
right: 0px;
bottom: 7px;
z-index: -1;
height: 8px;
}
I am implementing a website which have a layout like below
I am a bit confuse about the HTML structure for this layout blue section is almost half divide my background and content will be centered and blue section will always be exactly divided in this ratio can anyone assist me how to make it possible. One more thing I need to use blue section as background color may be in RGBA.
A pseudo-element could work here
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background-image: url(http://lorempixel.com/output/abstract-q-c-100-100-9.jpg);
}
body::before {
content: '';
position: absolute;
top: 0;
left: 50%;
height: 100vh;
width: 50%;
background: rgba(0, 0, 255, 0.5);
z-index: -1;
}
.navbar {
margin-top: 25px;
height: 50px;
background: green;
border: 1px solid black;
}
<div class="navbar"></div>
Place this DIV after body tag:
<body>
<div id="blue"></div>
content
</body>
body {
background:url('img');
height:100%;
width:100%;
}
#blue {
position: fixed;
top: 0;
left: 50%;
background: rgba(0, 0, 255, 0.35);
height: 100%;
width: 1000px;
}
JSFiddle