Is any ways to make this figure with only html & css?
Almost the same solution as #pedram, but using pseudo element in order to avoid inverse skewing the content inside the div (if there will be a content) :
div.content {
width: 200px;
height: 200px;
position:relative;
padding:20px;
box-sizing:border-box;
}
div.content:before {
content:"";
position:absolute;
background: #ff8f00;
border-radius: 15px;
transform: skew(-5deg);
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
]
<div class="content">
lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume
</div>
You should use transform skew like below, and your shape called Parallelogram
div {
width: 200px;
height: 200px;
background: #ff8f00;
border-radius: 15px;
transform: skew(-5deg); /* OR transform: skew(-190deg); */
position: relative;
left: 20px;
top: 10px;
}
<div>
</div>
Related
What I want to achieve is make a tag text to start new line under it own text not under numbers
ul.myul {
counter-reset: li;
}
ul.myul li {
counter-increment: li;
list-style: none;
margin-bottom: 10px;
}
ul.myul li a::before {
content: "0" counter(li);
font-size: 22px;
font-family: 'poppinsbold';
color: red;
margin-right: 10px;
}
<div style="width:400px">
<ul class="myul">
<li><a>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</a></li>
<li><a>lorem ipsum lorem</a></li>
</ul>
</div>
This is what I want actually, it should goes to new line after red line, not behind the redline:
ul.myul {
counter-reset: li;
}
ul.myul li {
counter-increment: li;
list-style: none;
margin-bottom: 10px;
}
ul.myul li a::before {
content: "0" counter(li);
font-size: 22px;
font-family: 'poppinsbold';
color: red;
margin-right: 10px;
}
.myul::after {
content: "";
width: 2px;
height: 100%;
background: red;
position: absolute;
top: 0;
left: 78px;
}
<div style="width:400px">
<ul class="myul">
<li><a>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</a></li>
<li><a>lorem ipsum lorem</a></li>
</ul>
</div>
#CBroe had already mentioned it correctly in the comment. The ul CSS property list-style-position: outside; is the right way to go here.
ul.myul {
counter-reset: li;
}
ul.myul li {
counter-increment: li;
list-style: none;
margin-bottom: 10px;
padding-left: 50px;
list-style-position: outside;
position: relative;
}
ul.myul li::before {
content: "0" counter(li) ".";
font-size: 22px;
font-family: 'poppinsbold';
color: red;
left: 0;
position: absolute;
top: 0;
}
.myul::after {
content: "";
width: 2px;
height: 100%;
background: red;
position: absolute;
top: 0;
left: 86px;
}
<div style="width:400px">
<ul class="myul">
<li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
<li><a>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</a></li>
<li><a>lorem ipsum lorem</a></li>
</ul>
</div>
I have rounded border around div with a hidden part like in image below. It has to be display: flex and should not move around.
I tried adding only bot and left border, and creating top border with div, but the rounding is a bit off. Any suggestions would be welcomed here, thanks.
EDIT: i only need to hide border, inside of the div should be visible
You can use pseudo elements to achieve this. You may need to position them according to your layout and content
#border {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
word-wrap: break-word;
position: absolute;
border-left: solid 2px black;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
height: 250px;
width: 400px;
}
#border::before {
content:"";
position: absolute;
top: 0px;
left: -1px;
height: 5px;
width: 150px;
border-top: solid 2px black;
border-top-left-radius: 5px;
}
#border::after {
content:"";
position: absolute;
top: 244px;
left: -2px;
width: 300px;
height: 5px;
border-bottom: solid 2px black;
border-bottom-left-radius: 5px;
}
<div id="border">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
I'm trying to implement a text loading animation using only CSS. what I have is a text with black color, then when the page loads the text will fill start filling with a red color over several seconds.
The issue I'm facing is that the text loading animation is working fine, but when the text ends and begins with a new line the animation text still continues on the same line.
How can I fix this?
body {
background: #3498db;
font-family: sans-serif;
}
h1 {
position: relative;
color: rgba(0, 0, 0, .3);
font-size: 5em;
white-space: wrap;
}
h1:before {
content: attr(data-text);
position: absolute;
overflow: hidden;
max-width: 100%;
white-space: nowrap;
word-break: break-all;
color: #fff;
animation: loading 8s linear;
}
#keyframes loading {
0% {
max-width: 0;
}
}
<h1 data-text="Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.">Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.</h1>
An idea is to consider gradient coloration with background-clip: text applied to an inline element.
body {
background: #3498db;
font-family: sans-serif;
}
h1 {
font-size: 5em;
}
h1 span {
background:
linear-gradient(#fff,#fff) left no-repeat
rgba(0, 0, 0, .3);
background-size:0% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation:loading 5s forwards linear;
}
#keyframes loading {
to {
background-size:100% 100%;
}
}
<h1><span>Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.</span></h1>
To better understand how it works, here is a basic example where you can see how inline element behave with background coloration and how its different from block level element:
.color {
font-size: 1.5em;
line-height: 1.5em;
border: 2px solid;
background: linear-gradient(red, red) left no-repeat;
background-size: 0% 100%;
animation: change 5s linear forwards;
}
#keyframes change {
100% {
background-size: 100% 100%
}
}
<span class="color">
lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume
</span>
<div class="color">
lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume
</div>
I simply apply the same logic using background-clip:text to color the text instead of the background:
.color {
font-size: 1.5em;
line-height: 1.5em;
border: 2px solid;
background: linear-gradient(red, red) left no-repeat;
background-size: 0% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: change 5s linear forwards;
}
#keyframes change {
100% {
background-size: 100% 100%
}
}
<span class="color">
lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume
</span>
<div class="color">
lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume
</div>
I have tried to make like this block but wasn't able to make as in the design. How can I make it? Can you help me? Here is desired block
and code I have tried:
.section-1 {
background: green;
height: 100px;
}
.section-2 {
display: flex;
align-items: center;
}
.col-img {
margin-top: -40px;
position: relative;
}
.col-img:after {
top: 40px;
position: absolute;
right: 100%;
width: 10px;
background: purple;
content: '';
bottom: 0;
}
.col-img img{
width: 100%;
vertical-align: top;
}
.section-2 .col {
width: 50%;
}
<div class="section-1">
</div>
<div class="section-2">
<div class="col">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum voluptatem beatae quia facilis nobis, dolore quidem nostrum! Blanditiis eveniet dolor a, laudantium repudiandae rem commodi ea adipisci. Eius, obcaecati rerum.</p>
</div>
<div class="col col-img">
<img src="http://via.placeholder.com/650x650" alt="">
</div>
</div>
I would consider multiple background and some border like this like this:
body {
margin:0;
}
.box {
padding:40px calc(100% - 250px) 10px 20px;
box-sizing:border-box;
border-top:30px solid lightblue;
border-bottom:5px solid yellow;
height:350px;
background:
linear-gradient(120deg, lightblue 280px,transparent 280px)0 0/100% 40px no-repeat,
linear-gradient(120deg,white 250px,yellow 250px,yellow 280px,transparent 280px)0 0/100% 100% no-repeat,
url(https://lorempixel.com/1000/1000/) 0 0/cover no-repeat;
}
<div class="box">
lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum
</div>
Or more easier way with more element and some transformation:
body {
margin:0;
}
.box {
box-sizing:border-box;
border-top:30px solid lightblue;
border-bottom:5px solid yellow;
height:100vh;
display:flex;
background:url(https://lorempixel.com/1000/1000/) 0 0/cover no-repeat;
}
.content {
padding:20px 5px 0 30px;
box-sizing:border-box;
width:40%;
border-top:20px solid lightblue;
background:linear-gradient(yellow,yellow) 100% 0/10px 100% no-repeat;
transform:skew(-20deg);
transform-origin:top left;
background-color:#fff;
}
.content span{
display:inline-block;
transform:skew(20deg);
}
<div class="box">
<div class="content">
<span> lorem ipsum lorem ipsum lorem ipsum lorem ipsum</span>
</div>
</div>
You will want to use the CSS3 transform property, to skew your image. You can use either the skewX() or skewY() functions, or you can rotate().
.col-img {
transform:rotate(25deg);
}
Hope this helps.
I'm having a Youtube video iframe cover the whole window (100% width and height) and i have the rest of the elements scroll over the video.
Everything works fine on Chrome and Firefox but IE doesn't seem to respond to z-index.
I've created a jsFiddle here http://jsfiddle.net/RickyStam/42tLS/ where you can see the problem.
HTML
<div class="page-container">
<div>
<div class="header">
<img src="Images/logo.png" />
<div class="menu-container">
<ul>
<li>solutions</li>
<li>about us</li>
<li>contact</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="video-container">
<iframe class="video-player" src="//www.youtube.com/embed/7x8BCbo45qA?autoplay=0&showinfo=0&controls=0" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
<div class="video-container-text">
<h1 class="regularfonts">LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</h1>
<p>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</p>
</div>
</div>
</div>
<div style="width: 100%; height: 685px; z-index: 12"></div>
<div class="aboutus-container">
<h1>ABOUT US</h1>
<p>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUMLOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</p>
<p>
LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM<br />
LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM
</p>
<p>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</p>
</div>
</div>
CSS
.page-container {
width: 100%;
}
.header {
background: black;
height: 80px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 11;
}
.video-container {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
text-align: center;
}
.video-player {
width: 100%;
height: 100%;
}
.video-container-text {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
background-image: url('../Images/check_black.png');
padding-top: 200px;
box-sizing: border-box;
}
.video-container-text h1 {
font-size: 18px;
padding: 20px 30px;
background-image: url('../Images/check_black.png');
border-left: 2px solid #cf0103;
border-right: 2px solid #cf0103;
display: inline-block;
}
.aboutus-container {
height: 270px;
background: #292929;
text-align: center;
position: relative;
z-index: 10;
}
.aboutus-container h1 {
font-size: 25px;
display: inline-block;
margin-top: 45px;
margin-bottom: 20px;
}
Any help will be much appreciated!
I manage to find the answer i had to add to the src of iframe &wmode=opaque
Here is the complete iframe :
<iframe class="video-player" src="//www.youtube.com/embed/7x8BCbo45qA?autoplay=0&showinfo=0&controls=0&wmode=opaque" wmode="Opaque" frameborder="0" allowfullscreen></iframe>