short question: How do I achieve this scrolling effect with css? ->
http://focuslabllc.com/
I already tried this:
#one {
background: url(http://images.buzzillions.com/images_products/07/02/iron-horse- maverick-elite-mountain-bike-performance-exclusive_13526_100.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment:fixed;
}
#two {
background: url(http://img01.static-nextag.com/image/GMC-Denali-Road-Bike/1/000/006/107/006/610700673.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment:fixed;
}
Thanks! :)
Its called a "curtain reveal" but in this instance its in reverse. http://www.thecssninja.com/css/reveal-effect
Essentially the first "slide" is located "below" all the other content and set to position: fixed and say z-index: 1 and all the others are set to position: relative and z-index: 10
http://jsfiddle.net/3n1gm4/8gDDy/
so in code it would be
HTML
<div class="slide1">CONTENT</div>
<div class="slide2">CONTENT</div>
CSS
.slide1 {
position: fixed;
z-index: 1; /* sets it below the other slides in the layer stack */
height: 100%
}
.slide2 {
position: relative;
z-index: 10; /* sets it above .slide1 */
margin-top: 100%; /* this pushes it below .slide1 in the scroll */
height: 100% /* full length slides */
}
* This was quickly done and probably not 100% accurate but intended to give you a basic idea about whats going on there.
Ok, you can do this with just CSS.
HTML
<div class="main">Sample text/div>
<div class="reveal-me-holder"></div>
<div class="reveal-me">Revealed</div>
CSS
body {
margin:0;
}
.main {
height: 700px;
position:relative;
z-index: 2;
background: red;
}
.reveal-me {
height: 500px;
position:fixed;
bottom:0;
width:100%;
background: black;
color:white;
}
.reveal-me-holder {
height: 500px;
}
This jsfiddle shows the results.
Related
In CSS, I want to make a background with 50% of a color and 50% of another color but this color need to be terminated by a wave like that:
Actually I have that:
But it doesn't take 50% of screen.
Here is my code:
body {
background-color: #3f2982;
}
#wavebg {
position: relative;
content: "";
bottom: 0;
background: url('https://i.imgur.com/IJelEnu.png');
background-size: contain;
background-repeat: no-repeat;
width: 50%;
height: 100%;
float: left;
}
<div id='wavebg'></div>
How I can change it for take 50% of the screen?
body {
background-color: #3f2982;
}
#dark-bg {
width: 45%;
height: 100vh;
background-color: #27184f;
float: left;
}
#wavebg {
position: relative;
content: "";
bottom: 0;
background: url(https://i.imgur.com/IJelEnu.png);
background-size: contain;
background-repeat: no-repeat;
width: 50%;
height: 100vh;
float: left;
}
<div id="bg-container">
<div id="dark-bg"></div>
<div id='wavebg'>
</div>
</div>
Since the width of your image is not sufficient to cover 50% of screen width, your background image looks as if its stuck in the left border of the browser.
The trick is to apply a div immediately left to the image with the same color as the image.
This will get you the desired result of wave in approximate center of the screen. You may need to adjust #dark-bg width with css #media queries for a better responsive layout.
I sincerely hope it helps. This is the result you can have:
body {
background-color: #3f2982;
}
body,html{
height: 100%;
width: 100%;
margin: 0;
}
#wavebg {
background: url('https://i.imgur.com/IJelEnu.png');
background-size: 70% 100%;
background-repeat: no-repeat;
width: 60%;
height: 200%;
}
<html><body><div id='wavebg'></div></body></html>
I've looked into this a fair bit but can't seem to find a good, solid answer to find how to make a responsive circle around a div element of variable height.
It's easy to make a simple responsive circle using vw units.
<div style="height:20vw; width:20vw"></div>
However, I'm looking to use a min-height of an element and have a circle around this div.
Another way to create a responsive circle is using something like the snippet below, but again I can't adapt this to work for a variable height (again, I can't use vh units as the div will change in height.
.square {
position: relative;
width: 10%;
background: gray;
border-radius: 50%;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
<div class="square">
<div class="content">
</div>
</div>
I am trying to create something like the below, where the circle will never cut into the corners of the div (with around a 10px padding). I personally was trying to avoid javascript and would have preferred a css only approach, but it seems it's unavoidable. Maybe the only solution is to use a jquery to calculate the height of the element in order to apply this to a wrapper element?
I was playing around with this:
.square {
position: absolute;
top: 50%;
display: inline-block;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100px;
border-radius: 50%;
background: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium');
background-size: 100% 100%;
padding: 20px;
}
.content {
width: 300px;
min-height: 100px;
background: tomato;
}
<div class="square">
<div class="content">
Hello!<br>
<br><br><br>This has a variable height but fixed width<br><br><br>Hello
</div>
</div>
Clip-path can easily do this if you consider solid coloration.
Resize the element and the circle will follow:
.box {
width: 200px;
height: 200px;
overflow: hidden;
resize: both;
background: blue;
box-shadow: 0 0 0 200vmax red;
clip-path: circle(71%);
margin: 100px auto;
}
<div class="box"></div>
Related question to understand the magic number 71%: clip-path:circle() radius doesn't seem to be calculated correctly
To use an image we can consider pseudo elements. You can also rely on calc() to add the offset:
.box {
width: 200px;=
resize: both;
clip-path: circle(calc(71% + 10px));
margin: 100px auto;
position: relative;
font-size:35px;
color:#fff;
}
/* the background layer */
.box::before {
content:"";
position: absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background:blue;
}
/* the image layer */
.box::after {
content:"";
position: fixed; /* to make sure the image cover all the screen */
z-index:-2;
top:0;
bottom:0;
left:0;
right:0;
background:url(https://picsum.photos/id/1015/1000/1000) center/cover no-repeat;
}
<div class="box" contenteditable="true"> Edit this<br>text </div>
I tried my hardest to figure this out with pure css. Though the problem with css I could not figure out how to calculate the diameter of the circle based on the content div size; the length from top left corner to bottom right corner of the variable height div.
I'm not sure if can be done using the calc() css function.
But I did manage to do it with a little jquery (which could easily be changed to pure javascript if you are not using jquery).
See working resizable example below (follow my comments in code)
Note: If you are using internet explorer the resizable demo content div will not resize.
// circumscriber for variable size divs
function circumscriber() {
// for each variable size div on page
$(".variable-size").each(function() {
// get the variable size div content width and height
let width = $(this).outerWidth();
let height = $(this).outerHeight();
// get the diameter for our pefect circle based on content size
let diameter = Math.sqrt(width ** 2 + height ** 2);
// extra 15 pixel circle edge around variable size div
let edge = 15;
// add current circle size width css
$('.circle', this).css({
'width': (diameter + (edge * 2)) + 'px'
})
});
}
// run the circumscriber (you might wana do this on ready)
circumscriber();
// if the window is resized responsively
$(window).on('resize', function() {
circumscriber();
});
// for demo purpose to fire circumscriber when resizing content
// not needed for real thing
$('.content').on('input', function() {
this.style.height = "";
this.style.height = ( this.scrollHeight - 30 ) + "px";
circumscriber();
}).on('mouseup', function() {
circumscriber();
});
/* variable size container to be circumscribed by circle */
/* none of these styles are required, this just to center the variable size div in the window for demo purposes */
.variable-size {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* resizable text area for demo */
/* again not needed */
.variable-size .content {
padding: 15px;
background: #fff;
resize: both;
overflow: auto;
color: #000;
border: none;
width: 200px;
font-weight: bold;
}
.variable-size .content:focus {
outline: 0;
}
/* child circle div css */
.variable-size .circle {
position: absolute;
background-image: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium');
background-position: center center;
z-index: -1;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease;
width: 0;
}
/* fast way to make circle height the same as current width */
.variable-size .circle:before {
display: block;
content: '';
width: 100%;
padding-top: 100%;
}
/* demo window css */
HTML,
BODY {
height: 100%;
min-height: 100%;
background: black;
position: relative;
font-family: "Lucida Console", Courier, monospace;
}
<div class="variable-size">
<textarea class="content" rows="1" placeholder="TYPE TEXT OR RESIZE ME ↘"></textarea>
<div class="circle"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
See jsfiddle here... https://jsfiddle.net/joshmoto/6d0zs7uq/
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
Source: https://www.w3schools.com/
You could use flex display and insert empty flex-items around the inner div and use flex-basis to fix their width.
Try this
.square {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100px;
border-radius: 50%;
background: black;
background-size: 100% 100%;
padding: 20px;
}
.content {
width: 300px;
min-height: 100px;
background: tomato;
}
.emptyDiv {
flex-basis: 120px
}
<div class="square">
<div class="emptyDiv"></div>
<div class="content">
Hello!<br>
<br><br><br>This has a variable height but fixed width<br><br><br>Hello
</div>
<div class="emptyDiv"></div>
</div>
How can I achieve to get something like this? Can you help me?
You can achieve that with CSS.
The idea is to have 3 blocs :
a container (which will contain the image as background)
an empty block which will be rotated to simulate the triangle
a div wich will contain the text
The idea is to rotate the empty block to get the angle you need.
To create the "triangle" effect, we use the overflow:hidden on the container to act as a mask (you also need to make the rotated block bigger than hte container to cover it despite the rotation).
Then you define the triangle & content blocks positions & z-index to superpose them.
Note : You don't necessary have to put the image as the background of the container block. you can also display with an img tag and use z-index again to display the 3 blocks on top of each other.
.container,
.rotated-block {
display:block;
}
.container {
background: #000000;
width: 600px;
height: 350px;
overflow: hidden;
position: relative;
margin-left: auto;
margin-right: auto;
}
.rotated-block {
position: absolute;
zi-index: 1;
width: 100%;
min-height: 150%;
background: #FFFFFF;
transform: rotate(-20deg);
left: -40%;
top: -7%;
}
.content {
position: relative;
z-index: 3;
top: 35%;
left: 10%;
}
<div class="container">
<div class="content">
<p>Purly made with HTML & CSS</p>
</div>
<div class="rotated-block"></div>
</div>
You can use multiple background mixing image + gradient:
body {
margin:0;
background:linear-gradient(65deg, white 45%, transparent 45%), url(http://lorempixel.com/600/400/nature);
background-size:auto auto, cover;
}
/* demo makeup */
div {
height:100vh;
width:50%;
display:flex;
}
p {
margin:auto;
}
<div><p>Whatever is on left</p></div>
If the final idea is to have two different image, you may also take a look at mix-blend-mode and this demo http://codepen.io/gc-nomade/pen/JRdEVO made for a similar question here ...
edit 2021
CSS shape are now well implemented and shape-outside could be usefull here :
example with CSS shape (clip-path/shape-poutside/shape-margin) and CSS calculation.
.half-slant {
display: flex;
}
.half-slant header {
flex: 1;
text-align: right;
background: #ededed;
}
.half-slant header img {
float: right;
height: 100%;
clip-path: polygon( calc(100% - 55vw) 0, 100% 0, 100% 100%, calc(100% - 45vw) 100%);
shape-outside: polygon( calc(100% - 55vw) 0, 100% 0, 100% 100%, calc(100% - 45vw) 100%);
shape-margin: 0.5em;
max-width: 100%;
}
.half-slant h1 {
margin-top: clamp(1em, 40vw, 8%);
}
<section class="half-slant">
<header>
<img src="https://picsum.photos/id/1001/1200/400">
<h1>Title</h1>
<p>some text below</p>
<p>and more</p>
</header>
</section>
Here is an article that might help you out: https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms
Lets assume I have a div with a Gradient applied as a background-property.
I now want to overlay a black PNG (of smaller size) and set the PNG to have a background-blend-mode of overlay. Unfortunately I have no idea on how to achieve this.
I know I can have a working background-blend-mode when I render the Gradient into the CSS of the Div with the PNG image like:
background: url(../img/plus.png), linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
background-blend-mode: overlay;
This however results in the Gradient being as small as the actual PNG, which is not a desired effect, like this:
What I want to achieve is this with pure CSS (if possible):
Here a Codepen to illustrate what I'm trying to do: http://codepen.io/anon/pen/zxOXGP
Notice the Black Icon. I wanna overlay this.
Try using mix-blend-mode instead of background-blend-mode and switch to simple text for the plus-sign or a webfont for more custom figures.
Example Codepen of the below:
.placeholder {
position: relative;
width: 400px;
height: 300px;
background-image: -moz-linear-gradient(#ff0000, #0000ff);
background-image: -webkit-linear-gradient(#ff0000, #0000ff);
background-image: linear-gradient(#ff0000, #0000ff);
}
.center {
position: absolute;
top: 25%;
width: 100%;
font-size: 120px;
}
.center span {
display: block;
text-align: center;
color: red;
mix-blend-mode: screen;
}
<div class="placeholder">
<div class="center"><span>+</span>
</div>
</div>
The gradient sandwich
Ingredients
The :before forms the bottom z-layer with z-index: 1, it is full opacity
The .content div forms the filling, central z-layer, with z-index: 2. It needs position: relative to take its z-index.
The :after forms the top z-layer with z-index: 3 and completes our lunch item. It is half opacity.
This is the tasty result:
Full Example
I have removed all but the standard CSS3 gradient for simplicity. View in a supporting browser.
.gradient {
position: relative;
height: 200px;
padding: 20px;
}
.gradient:before,
.gradient:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
display: block;
background-size: 100%;
background-image: linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
opacity: 0.5;
}
.gradient:before {
opacity: 1;
z-index: 1;
}
.gradient:after {
z-index: 3;
}
.overlayed_image {
position: relative;
width: 64px;
height: 64px;
display: block;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(http://cdn.flaticon.com/png/256/9029.png);
}
.content {
position: relative;
z-index: 2;
}
<div class="gradient">
<div class="content">
You can see me!
<div class="overlayed_image"></div>
</div>
</div>
I am working with a set HTML template that makes things a little tricky to customize exactly the way I want. So I am stuck with a structure that somewhat lacks flexibility.
I have a div that takes up 50% width of the page, but I want to center a containing div in the middle of the page. Due to other restrictions in other parts of the page, I really can't change the parent div being set to position: relative.
This is the effect I am after:
This is the code I have so far (which is not working):
HTML:
<div class="parent">
<div class="centerpage"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Berlin_U-Bahn_Train_A3L71.jpg/220px-Berlin_U-Bahn_Train_A3L71.jpg"></div>
</div>
CSS:
.parent {
background-color: #85D782;
height: 400px;
width: 50%;
position: relative;
}
.centerpage {
position: absolute;
}
you can use the old method of absolute and negative margin :
http://codepen.io/anon/pen/Htpen
.parent {
background-color: #85D782;
height: 400px;
width: 50%;
position:relative;
}
.centerpage {
position: absolute;
left:100%;
top:50%;
vertical-align:middle;
margin :-80px 0 0 -110px;/* negative margin is equal to half height/width of image */
}
or use a background-image or gradient http://codepen.io/anon/pen/GDbtg :
.centerpage {
background:
linear-gradient(to right,
#85D782 0%,
#85D782 50%,
#ffffff 50%,
#ffffff
)
;
height: 400px;
text-align:center;
line-height:400px;
}
img{
display:inline-block;
vertical-align:middle;
}
put image into a div and apply class below
{
width: 100px /* with your width whatever it is */;
text-align: center;
padding: 0px;
height: 110px;
display: table-cell;
vertical-align: middle;
}
and add one more class
.centerpage img {
width:100%;
}