Well, all i am trying to do is getting 7 circle icons around the top part of a half-circle. Here's a demo with only first 3 icons placed in order: http://jsfiddle.net/yxVkk/15/
That's how icon positioning is done now:
.one {
left: -35px;
top: 30px;
}
I found this way pretty complicated to arrange all icons this way and i thought there has got to be a better way of doing it.
I tried this method but it just didn't work: http://dabblet.com/gist/3864650
Is there any other way of doing it?
The method from your link works perfectly.
jsFiddle
CSS
.circle-big {
position: relative;
height:180px;
width:180px;
padding: 21px;
border-radius: 50% 50%;
margin: 100px;
}
.circle-big:before {
position: absolute;
height: 90px;
width: 180px;
border-radius: 90px 90px 0 0 ;
background: green;
content: "";
}
.circle {
border-radius: 50%;
width: 30px;
height: 30px;
background-color: red;
display: block;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin: -15px;
}
.one { transform: rotate(-30deg) translate(130px); }
.two { transform: rotate(-50deg) translate(130px); }
.three { transform: rotate(-70deg) translate(130px); }
.four { transform: rotate(-90deg) translate(130px); }
.five { transform: rotate(-110deg) translate(130px); }
.six { transform: rotate(-130deg) translate(130px); }
.seven { transform: rotate(-150deg) translate(130px); }
Hope it's what you expected.
If you want to increase the distance between the big circle and the small ones just increase the translation.
Related
I'm trying to get the toggle to move it 100% to the right. As I'm trying to make it responsive, I can't set it to move an xx amount of pixels.
Can you please help?
input:checked + .slider:before {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
https://jsfiddle.net/Lc1tdhgb/1/
Thanks
setTimeout(function() {
document.getElementById('togBtn').checked = true;
}, 1000)
#toggle {
width: 100%;
height: 100%;
position: relative;
}
.switch {
position: absolute;
display: inline-block;
width: 100%;
/*min-height: 32px;*/
height: auto;
top: 0;
}
.switch input {
display: none;
}
.slider {
cursor: pointer;
background-color: #ca2222;
-webkit-transition: .5s;
transition: .5s;
border-radius: 32px;
padding: 12px 0;
}
.slider:before {
position: absolute;
content: "";
height: 1.1em;
width: 1.1em;
left: 3px;
bottom: 3px;
background-color: white;
-webkit-transition: .5s;
transition: .5s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #3eab37;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
left: calc(100% - 20px);
/*-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);*/
}
/*------ ADDED CSS ---------*/
.slider:after {
content: 'OFF';
color: white;
display: block;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 0.7em;
font-family: Roboto, sans-serif;
}
input:checked+.slider:after {
content: 'ON';
}
/*--------- END --------*/
<div id="toggle">
<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></div></label>
</div>
Well, just make sure that the container of the elements follow a position: relative;, so the wrapper have the restrains for the absolute elements inside of it. Then, right is actually how far from right you want the element to be, in this case, you could've used either right: 0%; or left: 100%; although you've encountered the error in the fact that you'd be ignoring margins from the parent's style. That's why I added left: calc(100% - 20px); (20px was on trial and error, until I got it aligned with the outter border of the switch!), then now it works as wanted. Glad to help :)
I am trying to build a responsive, rotating circle similar to the one in this screenshot http://grab.by/PRrw from the www.wove.com menu.
So far, I have a responsive circle using a percentage padding-top and width to make the circle fit a minimum 100vh div, and elements placed on that circle. The issue is ensuring that the elements on the circle remain in place when the browser is resized. Any ideas on the best approach to accomplish this?
jsFiddle: https://jsfiddle.net/szjkrbut/1/
The CSS
.radial-menu {
border: solid 1px #999;
border-radius: 50%;
height: auto;
padding-top: 105%;
position: absolute;
right: -50%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
width: 105%;
z-index: 1;
}
.radial-item {
display: block;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
width: 35%;
max-width: 290px;
&:after {
background: #999;
border-radius: 50%;
content: '';
height: 8px;
position: absolute;
right: -40px;
top: 50px;
transition: 300ms all ease;
width: 8px;
}
&.item-1 {
transform: rotate(22deg) translate(-231%, 35px);
}
&.item-2 {
transform: rotate(0deg) translate(-237%, 35px);
}
&.item-3 {
transform: rotate(-22deg) translate(-240%, 35px);
}
}
I would like to know if it's possible to recreate the following image using css.
I am currently using it but in svg format.
Imagine this:
jsfiddle link
#circle {
background: #ccc;
border-radius: 50%;
/* Change these two equally to change circle size. Can be pixels, too. */
width: 25%;
padding-top: 25%;
height: 0;
position: relative;
}
.hand {
background: black;
width: 1px;
height: 100%;
position: absolute;
left: 50%;
top: 0;
}
.hand:nth-child(2) {
transform: rotate(90deg);
}
.hand:nth-child(3) {
transform: rotate(45deg);
}
.hand:nth-child(4) {
transform: rotate(135deg);
}
#circle:after {
content: '';
display: block;
width: 80%;
height: 80%;
border-radius: 50%;
background: white;
position: absolute;
top: 10%;
left: 10%;
}
<div id="circle">
<div class="hand"></div>
<div class="hand"></div>
<div class="hand"></div>
<div class="hand"></div>
</div>
Or if you need the middle to be transparent (this is a little hacky, and you may have to modify it to fit your exact needs): https://jsfiddle.net/wdoe8r3m/1/
I'm using a pseudo-element of content to make a triangle that I want floating outside the upper
Setup of problem: Get the blue triangle on this fiddle to be wider (but keep its height)
.bluebox { margin-top: 50px; background: blue; min-width: 300px; min-height: 200px; position: relative;}
.bluebox:after { content: "\25B2"; color: blue; position: absolute; font-size: 2em; top: -0.8em; left: 5%;}
What attribute to I need to tweak in order to do that?
If supporting IE8 and below is not a concern, you could apply scaleX() transform function with to the pseudo-element.
For instance (Vendor prefixes omitted due to brevity):
.bluebox:after {
/* other declarations... */
content: "\25B2";
transform: scaleX(1.5);
}
Online Example:
.bluebox {
margin-top: 50px;
background: blue;
min-width: 300px;
min-height: 200px;
position: relative;
}
.bluebox:after {
content: "\25B2";
color: blue;
position: absolute;
font-size: 2em;
top: -0.8em; left: 5%;
-webkit-transform: scaleX(1.5);
-moz-transform: scaleX(1.5);
-ms-transform: scaleX(1.5);
-o-transform: scaleX(1.5);
transform: scaleX(1.5);
}
<div class="bluebox"></div>
Here's an example as an image:
I want to style page elements like this using CSS, though. I can't seem to get it to work with border styles. Help appreciated.
You could also do it with two skewed pseudo-elements. Support is the same as for box-shadow: everything except IE8/7 and Opera Mini.
live demo
HTML:
<div class='box'></div>
CSS:
.box {
position: relative;
margin: 10em auto 0;
width: 20em; height: 20em;
background: dimgrey;
}
.box:before, .box:after {
position: absolute;
transform-origin: bottom right;
content: '';
}
.box:before {
top: 0; right: 100%; bottom: 0;
width: 4em;
background: darkgrey;
transform: skewY(45deg);
}
.box:after {
right: 0; bottom: 100%; left: 0;
height: 4em;
background: silver;
transform: skewX(45deg);
}