I am new to front-end developer and I am learning css basics , I can understand the following code
#twelve-point-star {
height: 100px;
width: 100px;
margin: 30px;
background: blue;
position: absolute;
}
#twelve-point-star:before {
height: 100px;
width: 100px;
background: blue;
content: "";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#twelve-point-star:after {
height: 100px;
width: 100px;
background: blue;
content: "";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
<p>twelve point star</p>
<div id="twelve-point-star"></div>
We have created a different kind of triangle and rotate that position to achieve this position. But what purpose we used :before and :after ?
See...you need total 12 stars. If you apply css only #twelve-point-star, you will get 4 corners...you need 8 corners more...For that you have used the :before to get 4 corners more and :after to get final 4 corners pseudo classes to get total 12 corners..
Try to change the color you will see the real visual.
Stack Snippet
#twelve-point-star {
height: 100px;
width: 100px;
margin:30px;
background: blue;
position: absolute;
}
#twelve-point-star:before {
height: 100px;
width: 100px;
background: red;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#twelve-point-star:after {
height: 100px;
width: 100px;
background: black;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
<body>
<p>
twelve point star
</p>
<div id="twelve-point-star">
</div>
</body>
Reference Link
::before
::after
:before
means that before every #twelve-point-star, the css in #twelve-point-star:before will be applied to #twelve-point-star. Likewise for :after, except that it is place after every #twelve-point-star. So what happens in the code is that you basically make 3 squares that are rotated in different directions, which creates that effect.
W3schools is a great source for you to learn css.
Related
I want to do something like this.
I dont know the property of css should be used.
my code is:
<h1><b>#GIRLBOSSES</b></h1>
CSS:
h1 b {
position: absolute;
color: #fdd2e9;
margin-left: 127px;
margin-top: 191px;
}
You need several settings. Different for different browsers.
.rotate {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
Look in JSfiddle:
https://jsfiddle.net/z5dcnrwa/
you can use css transform to do that
h1{
transform: rotate(-18deg);
transform-origin: top left;
}
Test live
h1 {
-ms-transform: rotate(-9deg); /* IE 9 */
-webkit-transform: rotate(-9deg); /* Chrome, Safari, Opera */
transform: rotate(-9deg);
}
Edit: In the title of the post you asked about vertical text. For vertical, set it to -90.
You are looking for the CSS3 transform Property. In your case, it would look something like this:
<h1 style="position: absolute; color: #fdd2e9; margin-left: 127px; margin-top: 191px; -ms-transform: rotate(-7deg); -webkit-transform: rotate(-7deg); transform: rotate(-7deg);"><b>#GIRLBOSSES</b></h1>
The operative styles are:
-ms-transform: rotate(-7deg); /* IE 9 */
-webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
transform: rotate(-7deg);
Do you want something like this?
.tilted {
position: absolute;
color: #fdd2e9;
left: 50%;
top: 10%;
font-size:50px;
-webkit-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.wrap {
position: relative;
display: inline-block;
}
<div class="wrap">
<img src="http://lorempixel.com/400/200/" />
<h1 class="tilted"><b>#GIRLBOSSES</b></h1>
</div>
This is my CSS and HTML.
div.musiclink {
position: relative;
}
a.music {
width: 258px;
height: 117px;
display: block;
background: deepskyblue url('MUSIC-cursive.png') center top no-repeat;
-webkit-transform: rotate(330deg);
-moz-transform: rotate(330deg);
-ms-transform: rotate(330deg);
-o-transform: rotate(330deg);
transform: rotate(330deg);
}
a.music:hover {
background-image: url('MUSIC-cursive-hover.png');
}
a.store {
position: relative;
left: 500px;
top: 100px;
width: 220px;
height: 110px;
display: block;
background: deeppink url('STORE-cursive.png') center top no-repeat;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
a.store:hover {
background-image: url('STORE-cursive-hover.png');
}
<div class="musiclink">
</div>
<div class="storelink">
</div>
The thing is I positioned everything successfully when I used images instead of href links, but now nothing is working the way I want it to. I don't want the images/links to move when I resize the browser.
"Ugh, yet another css octagon".
This is something different, I swear. I did read similar questions on StackOverflow.
I would like to have the following on my page:
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.octagon {
display: inline-block;
position: relative;
overflow: hidden;
-webkit-transform: rotate(22.5deg) scale(0.9) translateY(-4px);
-moz-transform: rotate(22.5deg) scale(0.9) translateY(-4px);
-ms-transform: rotate(22.5deg) scale(0.9) translateY(-4px);
-o-transform: rotate(22.5deg) scale(0.9) translateY(-4px);
transform: rotate(22.5deg) scale(0.9) translateY(-4px);
}
div.octagon > * {
position: relative;
overflow: hidden;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background: transparent;
border: 4px solid;
margin: 0;
}
div.octagon > *:after {
position: absolute;
/* There needs to be a negative value here to cancel
* out the width of the border. It's currently -4px,
* but if the border were 5px, then it'd be -5px.
*/
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
content: '';
border: inherit;
}
div.octagon > * > img {
display: block;
-webkit-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-moz-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-ms-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-o-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
transform: rotate(-67.5deg) scale(1.1) translateZ(0);
backface-visibility: hidden;
}
.green .octagon {
color: green;
}
/* Grouping */
.octagons {
position: relative;
display: inline-block;
/* To take dimension of the main octagon */
margin-left: 30px;
font-size: 0;
/* Remove white space */
}
.background.octagon {
position: absolute;
width: 100%;
height: 100%;
}
.background.octagon > * {
width: 100%;
height: 100%;
}
.left.octagon {
left: -30px;
}
.right.octagon {
right: -30px;
}
<div class="green octagons">
<div class="left background octagon">
<div> </div>
</div>
<div class="right background octagon">
<div> </div>
</div>
<div class="octagon">
<p>
<img src="https://placeholdit.imgix.net/~text?txtsize=25&txt=People&w=175&h=175" alt="" width="175" height="175" />
</p>
</div>
</div>
As you probably see, this is a "div soup". Because the main octagon needs to clip the image, it needs to have the same variable dimension as the image. Also, the octagons have border and are responsive, so I can't use "border hack".
The two background octagons only need the borders, but it need to be the same dimension as the image as well.
I can't use SVG because the image will be entered by end-user.
My question is then: Is there a cleaner way to do this?
How to make a 3 div with distortion, as shown in the picture?
I have made this:
.cars {
width: 100%;
height: 500px;
}
.car {
width: 33.33333333%;
height: 100%;
background: #3498db;
position: relative;
-webkit-transform: skewx(-10deg);
-moz-transform: skewx(-10deg);
-o-transform: skewx(-10deg);
-ms-transform: skewx(-10deg);
transform: skewx(-10deg);
transform-origin: top left;
float: left;
display: inline;
}
.car:nth-child(2) {
background: #000
}
.car:nth-child(3) {
background: #ff0000
}
<div class="cars">
<div class="car"></div>
<div class="car"></div>
<div class="car"></div>
</div>
jsFiddle
Left div - left corner straight, right corner slanted
Center div - left and right corner slanted
Right div - left corner slanted, right corner straight
I have used CSS's :after pseudo class to add another red box after the last, slanted one. However this one isn't slanted, thus 'filling in' the bit of the slant that you don't want:
.car:nth-child(3):after {
/* create the box */
content: "";
display: block;
/* make it fill the required space */
width: 80%; /* (this is only 80 because it was a bit large at 100) */
height: 100%;
background: #ff0000;
/* transform it in the opposite direction to counter the -10deg skew of .car */
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: -20%; /* counteract the 80% width */
}
I did the same with the first div, and :before:
.car:nth-child(3):before{
content: "";
display: block;
width: 70%;
height: 100%;
background: #3498db;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: 40%;
}
.cars {
width: 100%;
height: 500px;
margin-left: 100px;
}
.car {
width: 33.33333333%;
height: 100%;
background: #3498db;
position: relative;
-webkit-transform: skewx(-10deg);
-moz-transform: skewx(-10deg);
-o-transform: skewx(-10deg);
-ms-transform: skewx(-10deg);
transform: skewx(-10deg);
transform-origin: top left;
float: left;
display: inline;
}
.car:nth-child(2) {
background: #000;
}
.car:nth-child(3) {
background: #ff0000;
}
.car:nth-child(3):after {
content: "";
display: block;
width: 70%;
height: 100%;
background: #ff0000;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: -30%;
}
.car:nth-child(1):before {
content: "";
display: block;
width: 70%;
height: 100%;
background: #3498db;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: 40%;
}
<div class="cars">
<div class="car first"></div>
<div class="car"></div>
<div class="car last"></div>
</div>
<br><br>
I am a little confused at the minute I have this code:
HTML:
<div class="ms-layer ms-caption chevron">97.2%</div>
CSS:
.chevron {
position: relative;
top: 5px !important;
text-align: center;
padding: 10px;
margin-bottom: 6px;
height: 200px;
width: 200px;
color: red;
font-size: 6em;
}
.chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: blue;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
.chevron:after {
content: '';
position: relative;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: blue;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
Now as you can see the chevron is made up of two parts, the before and after classes.
The issue I am having is that the text I have added to the div sits behind the chevron however I want it to sit on top. I haven't really used CSS shapes before so I am a little baffled to why it isn't working.
As you can see I have made one side of the div position as absolute and the other as relative and it has made a difference but hasn't solved the problem.
Any help would be great thanks :)
try this code
.chevron:before {
background: none repeat scroll 0 0 blue;
content: "";
height: 100%;
position: absolute;
right: 0;
top: 0;
transform: skew(0deg, -6deg);
width: 50%;
z-index: -1;
}
<div class="ms-layer ms-caption chevron"><span>97.2%</span></div>
.chevron span {
position:relative;
z-index:2;
}
If you don't want to change your dom structure, add z-index:-1 to .chevron:before
Use z-index:5;
Z-index will help you display anything in the front.
Perhaps add a z-index to the css for .chevon
Do you have this showing somewhere?
have your chevron:before class behind it.
just add z-index:-1;
this will set the shape behind the text