I have an interesting situation.
What I want to achieve is that, instead of spreading from top to bottom, the animation will spread from the middle.
I also want to achieve this without any help of JS/jQuery.
Appreciate your thoughts :)
* {
border: 0;
margin: 0;
padding: 0;
}
h1 {
margin-top: 30px;
text-align: center;
line-height: 30px;
transition: line-height 0.3s ease-in-out;
}
h1:hover {
line-height: 60px;
}
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti doloribus beatae laboriosam aspernatur magni, molestias possimus, rerum voluptates dolorum aliquam est soluta animi inventore ut at eius voluptatum quod omnis.</h1>
Just wrap this text in a wrapper, give it a height, position the text in center vertically and it will work. View it in full page.
* {
border: 0;
margin: 0;
padding: 0;
}
h1 {
margin-top: 30px;
text-align: center;
line-height: 30px;
transition: line-height 0.3s ease-in-out;
}
h1:hover {
line-height: 60px;
}
.wrapper {
height: 400px;
display: flex;
align-items: center;
}
<div class="wrapper">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti doloribus beatae laboriosam aspernatur magni. consectetur adipisicing elit. Corrupti doloribus beatae laboriosam aspernatur magni.</h1>
</div>
Easy, Just use the line-height in this case, or you can use flex as well.
The only issue is the height of the container, in this case I use the 120px, that is the max height that the text can expand, you can also use height:100%; or height:100vh on the
* {
border: 0;
margin: 0;
padding: 0;
}
h1 {
display:inline-block;
text-align: center;
line-height: 30px;
transition: line-height 0.3s ease-in-out;
vertical-align:middle;
}
h1:hover {
line-height: 60px;
}
.container-mod{
margin-top: 30px;
height:100vh;
}
.container-mod:before{
content:"";
vertical-align:middle;
display: inline-block;
height:100%;
}
<div class="container-mod"><h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti doloribus beatae laboriosam aspernatur magni, molestias possimus, rerum voluptates dolorum aliquam est soluta animi inventore ut at eius voluptatum quod omnis.</h1></div>
Related
I'm having trouble creating my simple animation.
My question is, how can I display all the text in the animation, without knowing in advance what its length is?
The question is also about the time of the animation, but it is less critical for me.
Example below
Thank you, and keep up the pleasant coding.
.frame {
height: 100%;
width: 100px;
overflow: hidden;
}
.content {
height: 100%;
width: 100px;
background: yellow;
white-space: nowrap;
animation: floatTextSide 10s infinite linear ;
}
#keyframes floatTextSide {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
<div class="frame">
<div class="content">
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dicta optio alias ab, quas commodi perspiciatis voluptas voluptatum sit deserunt, magni temporibus sint tempore, quod voluptatibus vel velit. Perspiciatis, ipsa*****************.</span>
</div>
</div>
simply remove the width from content and use inline-block instead Then add 100px into the translation:
.frame {
height: 100%;
width: 100px;
overflow: hidden;
}
.content {
height: 100%;
display: inline-block;
background: yellow;
white-space: nowrap;
animation: floatTextSide 10s infinite linear;
}
#keyframes floatTextSide {
100% {
transform: translateX(calc(100px - 100%));
}
}
<div class="frame">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dicta optio alias ab, quas commodi perspiciatis voluptas voluptatum sit deserunt, magni temporibus sint tempore, quod voluptatibus vel velit. Perspiciatis, ipsa*****************.
</div>
</div>
The content div can highlight the text, but if you move it then the highlighting moves. What is needed is for the content to keep the yellow background but for the span with the text to move.
There is a wrinkle:
enter link description here
Only transformable elements can be transformed. That is, all elements whose layout is governed by the CSS box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.
So we put the animation on the span but give it inline-block status.
.frame {
height: 100%;
width: 100px;
width: auto;
overflow: hidden;
}
.content {
height: auto;
width: 100px;
background: yellow;
white-space: nowrap;
overflow: hidden;
}
.content span {
animation: floatTextSide 10s infinite linear ;
overflow: visible;
display: inline-block;
}
#keyframes floatTextSide {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
<div class="frame">
<div class="content">
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dicta optio alias ab, quas commodi perspiciatis voluptas voluptatum sit deserunt, magni temporibus sint tempore, quod voluptatibus vel velit. Perspiciatis, ipsa*****************.</span>
</div>
</div>
I've been racking my brain on this and I can't seem to get it to behave the way I want to. Essentially, I want the element which contains the open and close buttons to remain fixed even when I've already opened the navigation.
Right now, what happens is after clicking #open, the container scrolls with the screen. I want it to emulate the behavior similar to when I haven't cliked #open yet (meaning the said container remains fixed in position).
Thanks everyone! Code provided below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous"
/>
<title>Rotating Navigation</title>
</head>
<body>
<div class="container">
<div class="circle-container">
<div class="circle">
<button id="close">
<i class="fas fa-times"></i>
</button>
<button id="open">
<i class="fas fa-bars"> </i>
</button>
</div>
</div>
<div class="content">
<h1>Amazing Article</h1>
<small>Florin Pop</small>
<p
>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora,
nihil nisi! Aut, deleniti consectetur ratione consequatur, rerum
dolorum, ipsa debitis nulla ut autem maiores architecto quos quia amet
sapiente labore. Ex ipsam minima quam accusamus, perferendis illum
rerum numquam repellendus recusandae sed quas. Aperiam quisquam animi
commodi excepturi, at magni, in assumenda veniam impedit iusto,
molestiae dolores consectetur tenetur non fugit sapiente beatae eius
praesentium consequatur! Maxime magnam ipsam laborum expedita totam
nihil magni similique ratione sequi mollitia tempore voluptate dolorum
dolorem, quisquam quasi explicabo dolores natus temporibus
necessitatibus rerum praesentium perspiciatis nesciunt modi harum!
Perspiciatis amet modi eveniet doloremque?</p
>
<h3>My Dog</h3>
<img src="./assets/charles-deluvio-Mv9hjnEUHR4-unsplash.jpg" alt="" />
<p
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
explicabo ipsum quaerat debitis sapiente cum ratione perspiciatis
dolore, odio impedit necessitatibus eligendi facilis obcaecati
temporibus expedita repudiandae harum incidunt, enim perferendis
cupiditate distinctio! Earum optio accusantium quos qui et
perspiciatis ullam odio error modi voluptas quidem, itaque quisquam
labore minima. Tenetur libero distinctio sit animi iusto dolore
adipisci quam dolorum ea blanditiis pariatur perferendis, ullam
aliquid, qui voluptates id facilis inventore quibusdam minus quia.
Eveniet!</p
>
</div>
</div>
<nav>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-user-alt"></i>About</li>
<li><i class="fas fa-envelope"></i>Contact</li>
</ul>
</nav>
<script src="./js/main.js"></script>
</body>
</html>
#import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
background-color: #333;
color: #222;
overflow-x: hidden;
margin: 0;
}
.container {
background-color: #fafafa;
transform-origin: top left;
transition: transform 0.5s linear;
width: 100vw;
min-height: 100vh;
padding: 50px;
}
.container.show-nav {
transform: rotate(-20deg);
}
.circle-container {
position: fixed;
top: -100px;
left: -100px;
}
.circle {
background-color: #ff7979;
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
transition: transform 0.5s linear;
}
.container.show-nav .circle {
transform: rotate(-80deg);
position: fixed;
}
.circle button {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
background: transparent;
border: 0;
font-size: 26px;
color: #fff;
}
.circle button:focus {
outline: none;
}
.circle button#open {
left: 60%;
}
.circle button#close {
transform-origin: top left;
transform: rotate(90deg);
}
.container.show-nav + nav li {
transform: translateX(0);
transition-delay: 0.3s;
}
nav {
position: fixed;
bottom: 40px;
left: 0;
z-index: 100;
}
nav ul {
list-style-type: none;
padding-left: 30px;
}
nav ul li {
text-transform: uppercase;
color: #fff;
margin: 40px 0;
transform: translateX(-100%);
transition: transform 0.4s ease-in;
}
nav ul li i {
font-size: 20px;
margin-left: 10px;
transform: translateX(-150%);
}
nav ul li + li {
margin-left: 15px;
transform: translateX(-200%);
}
nav ul li + li + li {
margin-left: 30px;
}
.content img {
width: 100%;
}
.content {
max-width: 1000px;
}
.content h1 {
margin: 0;
}
.conent small {
color: #555;
font-style: italic;
}
.content p {
color: #333;
line-height: 1.5;
}
const open = document.getElementById("open");
const close = document.getElementById("close");
const container = document.querySelector(".container");
open.addEventListener("click", () => container.classList.add("show-nav"));
close.addEventListener("click", () => container.classList.remove("show-nav"));
You need to pull out the circle-container and everything in it from the container. Once it is separate you can position it to be fixed to the top left corner of the body and won't be bound by the same rules as if it was inside container Then you can style it from there.
I changed quite a few things in this code to get it to work so look it over and see what I did.
Fiddle here: https://jsfiddle.net/708Lo31v/
const open = document.getElementById("open");
const close = document.getElementById("close");
const container = document.querySelector(".container");
const cont1 = document.querySelector(".circle-container");
open.addEventListener("click", () => container.classList.add("show-nav"));
open.addEventListener("click", () => cont1.classList.add("show-nav"));
close.addEventListener("click", () => container.classList.remove("show-nav"));
close.addEventListener("click", () => cont1.classList.remove("show-nav"));
#import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
background-color: #333;
color: #222;
overflow-x: hidden;
margin: 0;
}
.container {
background-color: #fafafa;
transform-origin: top left;
transition: transform 0.5s linear;
width: 100vw;
min-height: 100vh;
padding: 50px;
}
.container.show-nav {
transform: rotate(-20deg);
position: relative;
}
.circle-container {
position: fixed;
top: -100px;
left: -100px;
z-index: 2;
}
.circle {
background-color: #ff7979;
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
transition: transform 0.5s linear;
}
.circle-container.show-nav .circle {
transform: rotate(-100deg);
position: fixed;
}
.circle button {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
background: transparent;
border: 0;
font-size: 26px;
color: #fff;
}
.circle button:focus {
outline: none;
}
.circle button#open {
left: 60%;
}
.circle button#close {
transform-origin: top left;
transform: rotate(90deg);
}
.container.show-nav + nav li {
transform: translateX(0);
transition-delay: 0.3s;
}
nav {
position: fixed;
bottom: 40px;
left: 0;
z-index: 100;
}
nav ul {
list-style-type: none;
padding-left: 30px;
}
nav ul li {
text-transform: uppercase;
color: #fff;
margin: 40px 0;
transform: translateX(-100%);
transition: transform 0.4s ease-in;
}
nav ul li i {
font-size: 20px;
margin-left: 10px;
transform: translateX(-150%);
}
nav ul li + li {
margin-left: 15px;
transform: translateX(-200%);
}
nav ul li + li + li {
margin-left: 30px;
}
.content img {
width: 100%;
}
.content {
max-width: 1000px;
}
.content h1 {
margin: 0;
}
.conent small {
color: #555;
font-style: italic;
}
.content p {
color: #333;
line-height: 1.5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous"
/>
<title>Rotating Navigation</title>
</head>
<body>
<div class="circle-container">
<div class="circle">
<button id="close">
<i class="fas fa-times"></i>
</button>
<button id="open">
<i class="fas fa-bars"> </i>
</button>
</div>
</div>
<div class="container">
<div class="content">
<h1>Amazing Article</h1>
<small>Florin Pop</small>
<p
>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora,
nihil nisi! Aut, deleniti consectetur ratione consequatur, rerum
dolorum, ipsa debitis nulla ut autem maiores architecto quos quia amet
sapiente labore. Ex ipsam minima quam accusamus, perferendis illum
rerum numquam repellendus recusandae sed quas. Aperiam quisquam animi
commodi excepturi, at magni, in assumenda veniam impedit iusto,
molestiae dolores consectetur tenetur non fugit sapiente beatae eius
praesentium consequatur! Maxime magnam ipsam laborum expedita totam
nihil magni similique ratione sequi mollitia tempore voluptate dolorum
dolorem, quisquam quasi explicabo dolores natus temporibus
necessitatibus rerum praesentium perspiciatis nesciunt modi harum!
Perspiciatis amet modi eveniet doloremque?</p
>
<h3>My Dog</h3>
<img src="./assets/charles-deluvio-Mv9hjnEUHR4-unsplash.jpg" alt="" />
<p
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
explicabo ipsum quaerat debitis sapiente cum ratione perspiciatis
dolore, odio impedit necessitatibus eligendi facilis obcaecati
temporibus expedita repudiandae harum incidunt, enim perferendis
cupiditate distinctio! Earum optio accusantium quos qui et
perspiciatis ullam odio error modi voluptas quidem, itaque quisquam
labore minima. Tenetur libero distinctio sit animi iusto dolore
adipisci quam dolorum ea blanditiis pariatur perferendis, ullam
aliquid, qui voluptates id facilis inventore quibusdam minus quia.
Eveniet!</p
>
</div>
</div>
<nav>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-user-alt"></i>About</li>
<li><i class="fas fa-envelope"></i>Contact</li>
</ul>
</nav>
<script src="./js/main.js"></script>
</body>
</html>
Here's the setup:
#out {
background-color: blue;
width: 100px;
padding: 5px;
max-height: 250px;
overflow: hidden;
}
#in {
background-color: red;
overflow: scroll-y;
}
input {
width: 100%;
box-sizing: border-box;
}
<div id="out">
<input value="stuff here that i don't know the height of">
<div id="in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eius voluptatibus tenetur cumque, incidunt maxime, cum dolorem sed corporis. Iste illum eaque enim cum quo saepe dicta perferendis incidunt. Accusamus.
</div>
</div>
You can see that the red box runs off the bottom. I want a scrollbar to appear instead, and the 5-pixel blue padding should be visible on the bottom.
How can I do this?
Note that I don't know the exact height of the red box. If there's less content, there should be no scrollbar, and the total height will be less than 250px.
Update: Based on your updated question, you can use display:flex instead of the max-height that I initially suggested and keep the overflow:auto.
#out {
background-color: blue;
width: 100px;
padding: 5px;
max-height: 250px;
overflow: hidden;
display: flex;
flex-direction: column;
}
#in {
background-color: red;
max-height: 240px;
overflow: auto;
}
<div id="out">
<input value="stuff here that i don't know the height of">
<div id="in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eius voluptatibus tenetur cumque, incidunt maxime, cum dolorem sed corporis. Iste illum eaque enim cum quo saepe dicta perferendis incidunt. Accusamus.
</div>
</div>
Ok so we have a div #out with a max-height to get scrollbars. The #in div will add the blue border and the #scroll div contains the content that will scroll on overflow-y
#out {
width: 100px;
max-height: 250px;
position:relative;
background:blue;
padding:5px;
}
#in {
background-color: red;
height:240px
}
#scroll{
height:100%;
overflow-y: scroll;
overflow-x: hidden;
}
<div id="out">
<div id="in">
<div id="scroll">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eius voluptatibus tenetur cumque, incidunt maxime, cum dolorem sed corporis. Iste illum eaque enim cum quo saepe dicta perferendis incidunt. Accusamus.
</div>
</div>
</div>
#out {
width: 100px;
max-height: 250px;
overflow: scroll;
background-color: blue;
padding: 5px;
}
#in {
background-color: red;
overflow: scroll;
max-height: 245px;
}
I've wrote this CSS :
div {
width: 500px;
height:150px;
margin-left:150px;
background: lightblue;
}
div::before {
content:'';
width:50px;
height:150px;
display: inline-block;
background:red;
position: absolute;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia rem quasi laborum dolor explicabo nobis pariatur ad deleniti repellendus dicta, ducimus expedita! Temporibus quo facilis quae magni, saepe, sapiente rem.</p>
</div>
What I want is to put the :before content outside div but still collapse to it and not inside.
Thanks for your help !
You can use transform: translateX(-100%) with left: 0 and add position: relative on parent
div {
width: 500px;
height: 150px;
margin-left: 150px;
background: lightblue;
position: relative;
}
div::before {
content: '';
width: 50px;
height: 150px;
left: 0;
display: inline-block;
transform: translateX(-100%);
background: red;
position: absolute;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia rem quasi laborum dolor explicabo nobis pariatur ad deleniti repellendus dicta, ducimus expedita! Temporibus quo facilis quae magni, saepe, sapiente rem.</p>
</div>
You have a few options, I would use the transform property which only requires a single style entry.
div {
width: 500px;
height:150px;
margin-left:150px;
background: lightblue;
}
div::before {
content:'';
width:50px;
height:150px;
display: inline-block;
background:red;
position: absolute;
transform: translateX(-50px);
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia rem quasi laborum dolor explicabo nobis pariatur ad deleniti repellendus dicta, ducimus expedita! Temporibus quo facilis quae magni, saepe, sapiente rem.</p>
</div>
You could do it with left property of the :before and setting div to position relative
div {
width: 500px;
height:150px;
margin-left:150px;
background: lightblue;
position: relative;
}
div::before {
left: -50px;
content:'';
width:50px;
height:150px;
display: inline-block;
background:red;
position: absolute;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia rem quasi laborum dolor explicabo nobis pariatur ad deleniti repellendus dicta, ducimus expedita! Temporibus quo facilis quae magni, saepe, sapiente rem.</p>
</div>
This question already has answers here:
Bootstrap full-width with 2 different backgrounds (and 2 columns)
(2 answers)
Closed 6 years ago.
I am having some trouble trying to create a layout like the image below. The left and right columns should take up 2/3 and 1/3 respectively of the main container max-width (which is centered using margin: auto;), but the remaining width of the page should be filled by the background image or the color of the column.
Is there some way to accomplish this with css?
It's a little tricky.
The problem is to avoid that the background image is cropped out of the body of the page, while a simple color fill is easier.
Try using :after and :before pseudo-elements with position:absolute; and putting there the background rules.
Then you need to force to fit all the page in all resolutions, so try these rules:
#left-column{
float:left;
width: 66.66%;
height:200px;
position:relative;
}
#left-column:before{
position:absolute;
/* for this example I used a free-copyright image from pixabay.com */
background:url(https://pixabay.com/static/uploads/photo/2016/05/01/00/57/barn-1364280_960_720.jpg) no-repeat;
background-size: 100% 100%;
top:0;
right:0;
width:100%;
padding-left:100%;
height:100%;
content:'';
display:block;
}
#right-column{
height:200px;
float:left;
width:33.33%;
position:relative;
}
#right-column:after{
position:absolute;
background:green;
top:0;
left:0;
width:10000px;
height:100%;
content:'';
display:block;
}
To show the content inside the columns give them a position:relative; z-index:1;.
Then you need to add to the body the following rule to avoid that backgrounds creates horizontal scroll-bar
body{
overflow-x:hidden;
}
To see it in a working example go here. .
If you prefer a more-accurate solution I think you must use javascript
You can emulate this with pseudo elements with large width:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
margin-bottom: 16px;
}
.wrapper {
overflow-x: hidden;
min-height: 100vh;
}
.container {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
max-width: 800px;
height: 700px;
margin: 0 auto;
}
.cols {
min-height: 300px;
display: flex;
}
.left {
background: linear-gradient(to right, #F9B80E, #E3342E);
flex: 0 0 66.6%;
position: relative;
}
.left:before {
content: '';
background: linear-gradient(to right, #FFED21, #F9B80E);
position: absolute;
right: 100%;
width: 1000px;
top: 0;
bottom: 0;
}
.right {
background: #E5E5E4;
position: relative;
padding: 20px;
}
.right:after {
content: '';
background: #E5E5E4;
position: absolute;
left: 100%;
width: 1000px;
top: 0;
bottom: 0;
}
<div class="wrapper">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quam. Dolore unde repudiandae deleniti, explicabo voluptatum, consequatur soluta architecto cumque! Modi sit doloremque veniam dignissimos porro nulla, exercitationem illum possimus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quam. Dolore unde repudiandae deleniti, explicabo voluptatum, consequatur soluta architecto cumque! Modi sit doloremque veniam dignissimos porro nulla, exercitationem illum possimus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quam. Dolore unde repudiandae deleniti, explicabo voluptatum, consequatur soluta architecto cumque! Modi sit doloremque veniam dignissimos porro nulla, exercitationem illum possimus!</p>
<div class="cols">
<div class="left"></div>
<div class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat esse, corporis, quis accusantium, adipisci sequi animi cupiditate distinctio blanditiis consequuntur illo molestias velit dolorem qui sit voluptas. Labore cupiditate, quis.</p>
</div>
</div>
</div>
</div>