I need to do this:
Divide a circle on 12 parts
I Try this:
<ul class="circle">
<li class="slide1"><div class="text">1</div></li>
<li class="slide2"><div class="text">2</div></li>
<li class="innerCircle"></li>
</ul>
<style>
.circle {
position: relative;
border: 1px solid black;
padding: 0;
margin: 1em auto;
width: 300px;
height: 300px;
border-radius: 50%;
list-style: none;
overflow: hidden;
}
li {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
}
.text {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
text-align: center;
-webkit-transform: skewY(60deg) rotate(15deg);
-ms-transform: skewY(60deg) rotate(15deg);
transform: skewY(60deg) rotate(15deg);
padding-top: 20px;
}
.slide1 {
-webkit-transform: rotate(0deg) skewY(-60deg);
-ms-transform: rotate(0deg) skewY(-60deg);
transform: rotate(0deg) skewY(-60deg);
}
.slide2 {
-webkit-transform: rotate(30deg) skewY(-60deg);
-ms-transform: rotate(30deg) skewY(-60deg);
transform: rotate(30deg) skewY(-60deg);
}
.slide1 .text {
cursor: pointer;
background: green;
}
.slide2 .text {
cursor: pointer;
background: orange;
}
</style>
But I need to divide the circle into two parts instead of 12, I don't quite understand the logic of the transformations they use, remove the 10 extra div but it doesn't I can manipulate the size of the remaining ones so that they take up 50% of the circle.
Does anyone know how? I need to divide the circle into two divs to be able to put a JavaScript event on each part
.circle {
position: relative;
border: 1px solid black;
padding: 0;
margin: 1em auto;
width: 300px;
height: 300px;
border-radius: 50%;
list-style: none;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr; /* splitting the circle into 2, equally sized columns/semi-circles */
}
li {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5rem
}
.slide1 {
cursor: pointer;
background: green;
}
.slide2 {
cursor: pointer;
background: orange;
}
<ul class="circle">
<li class="slide1">
<div class="text">1</div>
</li>
<li class="slide2">
<div class="text">2</div>
</li>
</ul>
I'm having trouble getting an element with a shadow inside a box (also with a shadow).
Any help?
http://jsfiddle.net/4T9Ac/
I think the trouble is with the z-index and position, but I can't quite put it together.
The rounded shadow must be behind the blue div, so that only the bottom shows at the bottom of the blue box. I want it to look like the "Single horizontal curve" in this demo: nicolasgallagher.com/css-drop-shadows-without-images/demo
Note: the HTML structure must not change, if possible!
HTML:
<section>
<div>
<span class="btn-jaune">
<a>
<span>hola</span>
</a>
</span>
</div>
</section>
CSS:
section {
border-top: 4px solid #00A1B1;
}
section > div {
background-color: #E6F8FA;
padding: 20px;
position: relative;
z-index: 1;
}
section > div:before {
content: "";
position: absolute;
z-index: -2;
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.6);
box-shadow: 0 0 15px rgba(0,0,0,0.6);
}
.btn-jaune {
width: 100%;
background: #FFEA00;
display: block;
position: relative;
}
.btn-jaune > a {
padding: 0;
margin: 0;
height: 48px;
display: block;
}
.btn-jaune > a:before,
.btn-jaune > a:after {
content: "";
position: absolute;
z-index: -2;
bottom: 15px;
width: 49%;
height: 20%;
max-width: 300px;
max-height: 100px;
-webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
}
.btn-jaune > a:before {
left: 4px;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
.btn-jaune > a:after {
right: 4px;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
}
.btn-jaune > a > span {
display: block;
text-transform: uppercase;
text-align: center;
font-weight: normal;
padding: 17px 30px;
margin-right: 20px;
}
Iqbal I don't see any changes with the code from your answer. Got a jsfiddle link?
What I want to achieve is this:
GOT IT!
The :before pseudo element went on the section, not on the section > div.
Also, as Iqbal said, the section had to be in relative position.
Thanks!
http://jsfiddle.net/4T9Ac/3/
Short changes.
section > div {
position: relative;
/*z-index: 1;*/
}
.btn-jaune {
position: relative;
z-index: 5;
}
.btn-jaune > a {
background: #FFEA00;
}
Long changes.
section {
position: relative;
}
section > div {
/*position: relative;*/
/*z-index: 1;*/
}
section > div:before {
/*z-index: -2;*/
}
.btn-jaune {
position: relative;
z-index: 5;
}
.btn-jaune > a {
background: #FFEA00;
}
.btn-jaune > a:before,
.btn-jaune > a:after {
position: absolute;
z-index: -1;
}
Warning: Negative z-index will not work in older browsers.
I am not 100% what you are wanting the final product to look like, but if you change section > div:before to have a top: 5%;, it puts the yellow box in the middle of the other box.
How to draw the tick symbol using CSS? The symbols I find using Unicode isn't aesthetically-pleasing.
EDIT
Icon fonts are a great suggestion. I was looking for something like this.
You can draw two rectangles and place them next to each other. And then rotate by 45 degrees. Modify the width/height/top/left parameters for any variation.
DEMO 1
.checkmark {
display: inline-block;
width: 22px;
height: 22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.checkmark_stem {
position: absolute;
width: 3px;
height: 9px;
background-color: #ccc;
left: 11px;
top: 6px;
}
.checkmark_kick {
position: absolute;
width: 3px;
height: 3px;
background-color: #ccc;
left: 8px;
top: 12px;
}
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
DEMO 2 (With circle)
.checkmark {
display: inline-block;
width: 22px;
height: 22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.checkmark_circle {
position: absolute;
width: 22px;
height: 22px;
background-color: green;
border-radius: 11px;
left: 0;
top: 0;
}
.checkmark_stem {
position: absolute;
width: 3px;
height: 9px;
background-color: #fff;
left: 11px;
top: 6px;
}
.checkmark_kick {
position: absolute;
width: 3px;
height: 3px;
background-color: #fff;
left: 8px;
top: 12px;
}
<span class="checkmark">
<div class="checkmark_circle"></div>
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
Here is another CSS solution. It takes fewer lines of code.
ul li:before {
content: '\2713';
display: inline-block;
color: red;
padding: 0 6px 0 0;
}
ul li {
list-style-type: none;
font-size: 1em;
}
<ul>
<li>test1</li>
<li>test</li>
</ul>
Do some transforms with the letter L
.checkmark {
font-family: arial;
-ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
-webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
transform: scaleX(-1) rotate(-35deg);
}
<div class="checkmark">L</div>
only css, quite simple I find it:
.checkmark {
display: inline-block;
transform: rotate(45deg);
height: 25px;
width: 12px;
margin-left: 60%;
border-bottom: 7px solid #78b13f;
border-right: 7px solid #78b13f;
}
<div class="checkmark"></div>
You can now include web fonts and even shrink down the file size with just the glyphs you need.
https://github.com/fontello/fontello
http://fontello.com/
li:before {
content:'[add icon symbol here]';
font-family: [my cool web icon font here];
display:inline-block;
vertical-align: top;
line-height: 1em;
width: 1em;
height:1em;
margin-right: 0.3em;
text-align: center;
color: #999;
}
An additional solution, for when you only have one of the :before / :after psuedo-elements available, is described here: :after-Checkbox using borders
It basically uses the border-bottom and border-right properties to create the checkbox, and then rotates the mirrored L using transform
Example
li {
position: relative; /* necessary for positioning the :after */
}
li.done {
list-style: none; /* remove normal bullet for done items */
}
li.done:after {
content: "";
background-color: transparent;
/* position the checkbox */
position: absolute;
left: -16px;
top: 0px;
/* setting the checkbox */
/* short arm */
width: 5px;
border-bottom: 3px solid #4D7C2A;
/* long arm */
height: 11px;
border-right: 3px solid #4D7C2A;
/* rotate the mirrored L to make it a checkbox */
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
To do:
<ul>
<li class="done">Great stuff</li>
<li class="done">Easy stuff</li>
<li>Difficult stuff</li>
</ul>
I've used something similar to BM2ilabs's answer in the past to style the tick in checkboxes. This technique uses only a single pseudo element so it preserves the semantic HTML and there is no reason for additional HTML elements.
Simple, semantic, without any dependencies or additional HTML.
label {
cursor: pointer;
}
input[type="checkbox"] {
position: relative;
top: 2px;
box-sizing: content-box;
width: 14px;
height: 14px;
margin: 0 5px 0 0;
cursor: pointer;
-webkit-appearance: none;
border-radius: 2px;
background-color: #fff;
border: 1px solid #b7b7b7;
}
input[type="checkbox"]:before {
content: '';
display: block;
transition: transform 200ms;
}
input[type="checkbox"]:checked:before {
width: 4px;
height: 9px;
margin: 0px 4px;
border-bottom: 2px solid #115c80;
border-right: 2px solid #115c80;
transform: rotate(45deg);
}
<label>
<input type="checkbox" name="check-1" value="Label">Label
</label>
Try this
// html example
<span>✓</span>
// css example
span {
content: "\2713";
}
i like this way because you don't need to create two components just one.
.checkmark:after {
opacity: 1;
height: 4em;
width: 2em;
-webkit-transform-origin: left top;
transform-origin: left top;
border-right: 2px solid #5cb85c;
border-top: 2px solid #5cb85c;
content: '';
left: 2em;
top: 4em;
position: absolute;
}
Animation from Scott Galloway Pen
$('#toggle').click(function() {
$('.circle-loader').toggleClass('load-complete');
$('.checkmark').toggle();
});
body {
padding: 5em;
text-align: center;
}
h1 {
margin-bottom: 1em;
}
.circle-loader {
margin-bottom: 3.5em;
border: 1px solid rgba(0, 0, 0, 0.2);
border-left-color: #5cb85c;
animation: loader-spin 1.2s infinite linear;
position: relative;
display: inline-block;
vertical-align: top;
border-radius: 50%;
width: 7em;
height: 7em;
}
.load-complete {
-webkit-animation: none;
animation: none;
border-color: #5cb85c;
transition: border 500ms ease-out;
}
.checkmark {
display: none;
}
.checkmark.draw:after {
animation-duration: 800ms;
animation-timing-function: ease;
animation-name: checkmark;
transform: scaleX(-1) rotate(135deg);
}
.checkmark:after {
opacity: 1;
height: 3.5em;
width: 1.75em;
transform-origin: left top;
border-right: 3px solid #5cb85c;
border-top: 3px solid #5cb85c;
content: '';
left: 1.75em;
top: 3.5em;
position: absolute;
}
#keyframes loader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 1.75em;
opacity: 1;
}
40% {
height: 3.5em;
width: 1.75em;
opacity: 1;
}
100% {
height: 3.5em;
width: 1.75em;
opacity: 1;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h1>Circle loader with checkmark completed state <small>CSS Animation</small></h1>
<div class="circle-loader">
<div class="checkmark draw"></div>
</div>
<p><button id="toggle" type="button" class="btn btn-success">Toggle Completed</button></p>
li:before {
content: '';
height: 5px;
background-color: green;
position: relative;
display: block;
top: 50%;
left: 50%;
width: 9px;
margin-left: -15px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
li:after {
content: '';
height: 5px;
background-color: green;
position: relative;
display: block;
top: 50%;
left: 50%;
width: 20px;
margin-left: -11px;
margin-top: -6px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
After some changing to above Henry's answer, I got a tick with in a circle, I came here looking for that, so adding my code here.
.snackbar_circle {
background-color: #f0f0f0;
border-radius: 13px;
padding: 0 5px;
}
.checkmark {
font-family: arial;
font-weight: bold;
-ms-transform: scaleX(-1) rotate(-35deg);
-webkit-transform: scaleX(-1) rotate(-35deg);
transform: scaleX(-1) rotate(-35deg);
color: #63BA3D;
display: inline-block;
}
<span class="snackbar_circle">
<span class="checkmark">L</span>
</span>
I suggest to use a tick symbol not draw it. Or use webfonts which are free for example: fontello[dot]com You can than replace the tick symbol with a web font glyph.
Lists
ul {padding: 0;}
li {list-style: none}
li:before {
display:inline-block;
vertical-align: top;
line-height: 1em;
width: 1em;
height:1em;
margin-right: 0.3em;
text-align: center;
content: '✔';
color: #999;
}
body {
font-size: 75%;
}
ul {
padding: 0;
}
li {
list-style: none
}
li:before {
display: inline-block;
vertical-align: top;
line-height: 1em;
width: 1em;
height: 1em;
margin-right: 0.3em;
text-align: center;
content: '✔';
color: #999;
}
<ul>
<li>This is a list item</li>
<li>This is a list item</li>
</ul>
Checkboxes
You even have web fonts with tick symbol glyphs and CSS 3 animations. For IE8 you would need to apply a polyfill since it does not understand :checked.
input[type="checkbox"] {
clip: rect(1px, 1px, 1px, 1px);
left: -9999px;
position: absolute !important;
}
label:before,
input[type="checkbox"]:checked + label:before {
content:'';
display:inline-block;
vertical-align: top;
line-height: 1em;
border: 1px solid #999;
border-radius: 0.3em;
width: 1em;
height:1em;
margin-right: 0.3em;
text-align: center;
}
input[type="checkbox"]:checked + label:before {
content: '✔';
color: green;
}
body {
font-size: 75%;
}
input[type="checkbox"] {
clip: rect(1px, 1px, 1px, 1px);
left: -9999px;
position: absolute !important;
}
label:before,
input[type="checkbox"]:checked+label:before {
content: '';
display: inline-block;
vertical-align: top;
line-height: 1em;
border: 1px solid #999;
border-radius: 0.3em;
width: 1em;
height: 1em;
margin-right: 0.3em;
text-align: center;
}
input[type="checkbox"]:checked+label:before {
content: '✔';
color: green;
}
<input type="checkbox" value="Option 1" name="option_1" id="option_1" />
<label for="option_1">option 1</label>
You might want to try fontawesome.io
It has great collection of icons. For you <i class="fa fa-check" aria-hidden="true"></i> should work. There are many check icons in this too. Hope it helps.
We can use CSS pseudo-element to make the checkmark/tick sign. Suppose, we have a span tag in our HTML and we want to place out checkmark before the span. We can simply do this:
<span class="check_text">Some Text</span>
Now, we can add the CSS like this:
span.check_text:before {
position: absolute;
height: 15px;
width: 5px;
border-bottom: 3px solid red;
border-right: 3px solid red;
content: "";
transform: rotate(45deg);
left: -25px;
top: 2px;
}
If you want a tick, you probably also want a cross, with background colours.
.icon {
display: inline-block;
width: 22px; height: 22px;
border-radius: 50%;
transform: rotate(45deg);
}
.icon::before, .icon::after { position: absolute; content: ''; background-color: #fff; }
.icon.icon-success { background: green; }
.icon.icon-success:before { width: 3px; height: 9px; top: 6px; left: 11px; }
.icon.icon-success:after { width: 3px; height: 3px; top: 12px; left: 8px; }
.icon.icon-failure { background: lightcoral; }
.icon.icon-failure::before { width: 3px; height: 12px; top: 5px; left: 10px; }
.icon.icon-failure::after { width: 12px; height: 3px; top: 10px; left: 5px; }
<i class="icon icon-success"></i>
<i class="icon icon-failure"></i>
This is my variant for making 'checked' buttons
function clickMe(data) {
data.classList.add("checked");
}
.unchecked::before {
content: "C";
}
.unchecked {
border-radius: 50%;
outline: none;
}
.checked::before {
content: "L";
}
.checked {
background-color: green;
transform: rotate(45deg) scaleX(-1);
}
<button class="unchecked" type="submit" onclick="clickMe(this); return false;" value="something"></button>
Also, using the awesome font, you can use the following tag.
Simple and beautiful
With the possibility of changing the size and color and other features in CSS
See result:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>fa fa-check-circle</h1>
<i class="fa fa-check-circle"></i>
<i class="fa fa-check-circle" style="font-size:24px"></i>
<i class="fa fa-check-circle" style="font-size:36px"></i>
<i class="fa fa-check-circle" style="font-size:48px;color:red"></i>
<br>
<p>Used on a button:</p>
<button style="font-size:24px">Button <i class="fa fa-check-circle"></i></button>
<p>Unicode:</p>
<i style="font-size:24px" class="fa"></i>
This is simple css for Sign Mark.
ul li:after{opacity: 1;content: '\2713';right: 20px;position: absolute;font-size: 20px;font-weight: bold;}
Searched everything but can't find a answer to my question.
I want the price to be on top of the image having the following code.
who can help me with this please?
HTML
<li class="span4">
<div class="thumbnail cart_item" ><span class="item_price price">€ 18.50</span>
<img alt="" src="http://test.jpg">
<div class="caption" >
CSS
.thumbnail>img {
display: block;
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
.price {
color: #fff;
font-size: 1.4em;
background: #96c42e;
padding: 8px 8px 10px 8px;
position: relative;
display: inline-block;
float: right;
margin-top: -8px;
margin-right: -10px;
-moz-transform: rotate(8deg);
-webkit-transform: rotate(8deg);
-ms-transform: rotate(8deg);
}
Try the adding the following:
.thumbnail{
position:relative;
}
.price {
color: #fff;
font-size: 1.4em;
background: #96c42e;
padding: 8px 8px 10px 8px;
position: absolute;
display: block;
top:0px;
left:auto;
right:0px;
margin-top: -8px;
margin-right: -10px;
-moz-transform: rotate(8deg);
-webkit-transform: rotate(8deg);
-ms-transform: rotate(8deg);
z-index:100;
}
Give the container position:relative then place the price tag using position:absolute.
I've got a styled checkbox where I want to have a link next to the label. The labels have different widths so I can't put the link relative to the left. Due to the styled checkbox I can't 'detect' the width of the label with css.
So to make it clear, in the jsfiddle I've made I want the link info to be to the left of the label.
http://jsfiddle.net/SAZ2P/3/
Cheers!
css:
.selectbox {
position: relative;
display: inline-block;
}
.selectbox input[type="checkbox"] {
visibility: hidden;
}
.selectbox label {
cursor: pointer;
position: absolute;
width: 15px;
height: 15px;
top: 0;
background: #fcfff4;
border: 1px solid #000;
text-indent: 30px;
white-space: nowrap;
letter-spacing: 2px;
line-height: 17px;
}
.selectbox label:after {
opacity: 0;
content: '';
position: absolute;
width: 6px;
height: 4px;
background: transparent;
top: 2px;
left: 3px;
border: 2px solid #333;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.selectbox label:hover::after {
opacity: 0.5;
}
.selectbox input[type=checkbox]:checked + label:after {
opacity: 1;
}
.selectbox a{
float: left;
}
I think it would be best to include the link inside of the label. For example:
<div class="selectbox">
<input type="checkbox" value="brand2" id="brand2" name="brand2" class="box">
<label for="brand2">info brand with longer name</label>
</div>