In this page following CSS to draw 12 point burst, how can I put some text inside it (in current form it does not show text inside text, I test z-index without success)?
How can I draw a 12 burst border in it most clean manner?
#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before, #burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
All you need is to nest another element inside the burst container:
<div id="burst-12"><span>I am the text</span></div>
Then you can style it the way you want:
#burst-12 span {
display:block;
position:absolute;
z-index:2;
}
You'll find a very basic example here.
Related
I tried rotating the content of my fixed div and it rotates as expected but the problem is it doesn't occupy the height of the div.
Sample fiddle here.
HTML:
<div class="outer-left">
<h2 class="paginator">Page 1 0f 10</h2>
</div>
CSS:
.outer-left {
background: #EFB041;
height: 100%;
display: block;
width: 4%;
position: fixed;
left: 18%;
}
.paginator {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
color: #fff;
}
Note: I can make it by applying width = auto on the div but how can I
achieve it using a fixed width?
Now I can achieve it adding
margin-top: 600px;
white-space:nowrap;
inside the paginator class. but is there a way cleaner on how to get this done?
jsfiddle
Maybe this jsfiddle works for you.
HTML:
<div class="outer-left">
<h2 class="paginator">Page 1 of 10</h2>
</div>
>
CSS:
.outer-left {
position: relative;
background: #EFB041;
overflow: hidden;
width: 5%;
left: 18%;
height: 200px;
float: left;
}
.paginator {
position: absolute;
top: 30%;
left: -2.0em;
width: auto;
margin: 0;
padding:0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
color: #fff;
}
I created an octagon clipped style using CSS transform rotate and scale as the code snippet below.
However, when looking in Chrome 52.0.2743.116 (64-bit) on El Capitan, the image looks blurry. On the contrary, the image looks sharp in Firefox.
I have tried all kinds of solutions such as backface-visibility: hidden; transform: translateZ(0); filter: blur(0); image-rendering: -webkit-optimize-contrast;. Yet the image is still blurry.
Is there any webkit specific rules that I can use to fix this?
div.octagon {
display: inline-block;
position: relative;
overflow: hidden;
-webkit-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
-moz-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
-ms-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
-o-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
margin-top: 1em;
margin-bottom: 1em;
}
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;
background-color: black;
}
div.octagon > *:after {
position: absolute;
/* There needs to be a negative value here to cancel
* out the width of the border. It's currently -3px,
* 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);
max-width: 100%;
height: auto;
image-rendering: -webkit-optimize-contrast;
}
.col-6 {
display: inline-block;
width: 49%;
}
.col-6 > .octagon {
width: 100%;
}
<div class="col-6">
<div class="octagon">
<p>
<img src="https://placeimg.com/300/300/people" width="500" height="500" />
</p>
</div>
</div>
<div class="col-6">
<img src="https://placeimg.com/300/300/people" width="300" height="300" />
</div>
I just tested this on my comp, and it looks better when I applied image rendering pixelated instead the -webkit-optimize-contrast.
div.octagon > * > img {
image-rendering: pixelated;
}
This is my HTML code:
<style>
#myelement
{
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
border:#000000 solid 2px;
width:500px;
height:500px;
}
#myelement:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: 0%;
left: 0%;
z-index: -1;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
background: url(image.jpg) 0 0 no-repeat;
}
</style>
<div id="myelement"></div>
This is image.jpg file:
This is output of browser:
Here, background image is fixed and container is rotating. I want to make reverse. i,e Container will be fixed and background will rotate.
If I understood your question properly, you only need to apply transform: rotate on the pseudo-element which has the background and nothing on the container (like in the below snippet).
#myelement {
position: relative;
overflow: hidden;
border: #000000 solid 2px;
width: 100px;
height: 100px;
}
#myelement:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
z-index: -1;
transform: rotate(30deg);
background: url(http://i.stack.imgur.com/lndoe.jpg) 0 0 no-repeat;
}
<div id="myelement"></div>
I want to create something like this via CSS.
Just want to use only CSS to create this custom shape with border radius. Any ideas please?
You can overlap a few div tags and use the skew effect.
HTML
<div class="container">
<div class="shape shape1"></div>
<div class="shape shape2"></div>
<div class="shape shape3"></div>
</div>
CSS
.container {
position: relative;
padding: 30px;
}
.shape {
position: absolute;
text-align: center;
padding: 12px;
height: 60px;
width: 200px;
}
.shape:after {
border-radius: 5px;
content: '';
position: absolute;
height: 100%;
width: 100%;
background: green;
top: 0;
left: 0;
}
.shape1:after {
-webkit-transform: skew(-5deg, -3deg);
-moz-transform: skew(-5deg, -3deg);
-ms-transform: skew(-5deg, -3deg);
-o-transform: skew(-5deg, -3deg);
transform: skew(-5deg, -3deg);
}
.shape2:after {
-webkit-transform: skew(0deg, -1deg);
-moz-transform: skew(0deg, -1deg);
-ms-transform: skew(0deg, -1deg);
-o-transform: skew(0deg, -1deg);
transform: skew(0deg, -1deg);
top: 4px;
left: 3px;
}
.shape3:after {
-webkit-transform: skew(3deg, -2deg);
-moz-transform: skew(2deg, -2deg);
-ms-transform: skew(2deg, -2deg);
-o-transform: skew(2deg, -2deg);
transform: skew(2deg, -2deg);
top: 2px;
left: -5px;
}
.set2 {
margin-top: 80px;
}
.set2 .shape2:after {
background: red;
}
.set2 .shape3:after {
background: blue;
}
Here's a jsFiddle
You may want to look into CSS3 2D Transforms. It's possible to do similar things, but there are limitations as well. I tried to do something similar to the referenced shape :)
// CSS
#shape {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
margin:30px;
}
#shape:after {
border-radius: 5px;
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
background: green;
-webkit-transform: skew(-5deg, -3deg);
-moz-transform: skew(-5deg, -3deg);
-ms-transform: skew(-5deg, -3deg);
-o-transform: skew(-5deg, -3deg);
transform: skew(-5deg, -3deg);
}
// HTML
<div id="shape"></div>
Check the jsFiddle
I have a couple divs, I want to rotate them to look like diamonds, but I don't want their background images to rotate, how can i achieve this? This is my code right now
<div id="diamonds">
<div class="diamond-big diamond-tiesto"><img src="<?php echo $images_url; ?>dj-1-overlay.png" /></div>
</div>
and my CSS:
#diamonds div {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
float:left;
}
.diamond-tiesto {background-image:url('images/dj-1.jpg'); background-size:cover; width:212px; height:212px; margin-left:160px; margin-right:120px;}
.diamond-tiesto img {margin-top:80px; margin-left:-20px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Basically I am trying to achieve this http://mqchen.github.io/jquery.diamonds.js/ without the jquery, anyone have any suggestions
Heres a fiddle just incase:
http://jsfiddle.net/7qj8h/1/
You could use the techniques described in this article and apply the transformation to a background image pseudo-element.
Demo/Code here: http://jsfiddle.net/7qj8h/4/
HTML:
<div id="diamonds">
<div class="diamond-big diamond-tiesto">
<img src="http://solarismusicfestival.com/new/wp-content/themes/default-blank/images/dj-1-overlay.png" />
</div>
</div>
CSS:
.diamond-big
{
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
/* rotate diamond */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.label {
/* counter rotate label */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* position label */
margin-top:80px;
margin-left:-20px;
}
.diamond-big:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
/* counter rotate bg */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* set bg for different DJs */
.diamond-tiesto:before {
background: url(http://solarismusicfestival.com/new/wp-content/themes/default-blank/images/dj-1.jpg) 0 0 repeat;
}
Set the .diamond to rotate 45 degrees
Set the background on a .diamond-inner child div, and rotate it back -45 degrees to counter the parent's transformation.
Set overflow: hidden; on the .diamond div to clip the edges.
Adjust the positioning on the inner diamond and image.
The result: http://jsfiddle.net/7qj8h/3/
The CSS:
#diamonds > div {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
float:left;
overflow: hidden;
}
.diamond-tiesto {
width:212px;
height:212px;
}
.diamond-tiesto .diamond-inner {
background-image: url("http://solarismusicfestival.com/new/wp-content/themes/default-blank/images/dj-1.jpg");
background-size: cover;
height: 305px;
left: 2px;
margin: 0 0 0 -49px;
position: absolute;
top: -45px;
transform: rotate(-45deg);
width: 305px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.diamond-tiesto img {
margin-left: 22px;
margin-top: 123px;
}