CSS-Shapes
CSS Shapes defined using Sass mixins.
I want to have a web page which has one centered word.
I want this word to be drawn with an animation, such that the page "writes" the word out the same way that we would, i.e. it starts at one point and draws lines and curves over time such that the end result is a glyph.
I do not care if this is done with <canvas> or the DOM, and I don't care whether it's done with JavaScript or CSS. The absence of jQuery would be nice, but not required.
How can I do this? I've searched exhaustively with no luck.
Source: (StackOverflow)
I'm wondering if there's an easier way to create circular divs than what I'm doing now.
Currently, I am just making an image for each different size, but it's annoying to do this.
Is there anyway using CSS to make divs which are circular and I can specify the radius?
Source: (StackOverflow)
If I use a pixel value for border-radius, the edge radius is always a circular arc even if the value is greater than the largest side of the element.
When I use percentages, the edge radius is elliptic and starts at the middle of each side of the element resulting in an oval shape :
Pixel value for border-radius :
div {
background: teal;
border-radius: 999px;
width: 230px;
height: 100px;
padding: 40px 10px;
box-sizing: border-box;
font-family: courier;
color: #fff;
}
<div>border-radius:999px;</div>
Percent value for border-radius :
div {
background: teal;
border-radius: 50%;
width: 230px;
height: 100px;
padding:40px 10px;
box-sizing:border-box;
font-family:courier;
color:#fff;
}
<div>border-radius:50%;</div>
Why doesn't border radius in percentages act the same way as border-radius set with pixel values?
Source: (StackOverflow)
Ok, so everyone knows you can make a triangle using this:
#triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
And that produces a solid, filled in triangle. But how would you make a hollow-type arrow-like triangle, like this?
Source: (StackOverflow)
I'm looking to create this overlapping circles shape in CSS:
Basically, just stacked circles. I've looked around, and all solutions I see include using multiple div elements for this effect. However, can't this be done with a single div, using CSS3? I looked at how it could be easily done, and figured that, if all colours are the same, you'd have a pill shape like this:
http://jsfiddle.net/5wytm0r4/
#circles {
background-color: red;
width: 130px;
height: 100px;
border-radius: 50px;
}
<div id="circles"></div>
And then simply draw a couple of quarter moons in it, and you're done. However, I can't figure out how to draw these moon shapes in my capsule shaped div.
Source: (StackOverflow)
This question already has an answer here:
Is it possible to draw circle using css only which can work on most of the browsers (IE,Mozilla,Safari) ?
Source: (StackOverflow)
So, I need to make a repeating hexagonal pattern, using CSS. If images are needed, I can go there, but I'd prefer to just use CSS if possible.
Here's an idea of what I'm trying to create:
Basically, I just need a way to create the hexagonal shapes, and then overlay text/images on top of them. I don't have much code yet, because I'm not really sure where to start. The problem is, I could just use <div>s in the shape of a hexagon like shown in (http://css-tricks.com/examples/ShapesOfCSS/), but then they wouldn't be connecting. I could use a repeating hexagon pattern, but then I wouldn't be able to specify the exact location of the text or images I need in specific shapes. Thanks for any help in advance.
Source: (StackOverflow)
I want to create a shape, which i would describe as "inverse circle":
The image is somehow inaccurate, because the black line should continue along the outer border of the div element.
Here is a demo of what i have at the moment: http://jsfiddle.net/n9fTF/
Is that even possible with CSS without images?
Source: (StackOverflow)
Here is the JSFIDDLE of my cat/animation without any drop-shadows to show the problem as clearly as I can. To my understanding this is being caused by the border-radius and possibly due to overflow: hidden;.
The owl is not what this question is about , just an example of a similar situation I was in. The jsfiddle/cat is what this question is about, sorry for the mix up!
Here is a JSFIDDLE for my cat with an inset box shadow using the blur property of a box-shadow and the pixelated edge is still the same around the eye.
The answer on here does solve what I saw with my Owl image but not for what this answer is about.
Here is the cat with an inset box-shadow while using the third value, blur.
I have tested this fiddle in Safari, Chrome, and Firefox and they all seem to display it the same.
I have two eyes on the Cheshire Cat that I started making yesterday out of CSS. Everything renders very well and I also have made an Owl(I first thought this was a similar situation but it is NOT) out of CSS that has a very minor yet similar problem on the eyes being pixelated around the edges.
I have also tried to give the eyes a border of the purple color but the pixelated edge stayed the same on the edge of the border.
On my new CSS creation the outside edge of the eyes is very pixelated and seem to be the color(yellow) of the parent circle.
Here is the CSS for the eyes.
.eye {
border-radius: 50%;
height: 100px;
width: 100px;
background: #FAD73F;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
position: relative;
display: inline-block;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
z-index: 100;
}
.pup {
border-radius: 50%;
height: 20px;
width: 20px;
background: #2b2b2b;
display: block;
position: absolute;
top: 40px;
left: 40px;
}
.lidT {
display: block;
width: 100px;
height: 100px;
background: #821067;
position: absolute;
top: -80px;
z-index: 20;
}
.lidB {
display: block;
width: 100px;
height: 100px;
background: #821067;
position: absolute;
bottom: -80px;
z-index: 20;
}
Below is the jsfiddle I used to make this animation/creature.
JSFIDDLE
I believe the problem is being caused by...
I think the root of the problem is being caused by the .lidT and .lidB classes I have contained inside of my .eye.
It seems to cut the eyelids off by 1px around the edge of it. Try making the eyes blink in the fiddle to see what I mean.
Images also are not out of the question but I would like to stick with making a CSS image first for a learning reason.
List of styles that do not help
box-shadow
border
box-sizing
Not a Firefox only bug
End List
Updates
A work around is adding an eye socket or outer main tag to the eye. This hides the pixelation but is only a workaround to the problem.
See apaul34208 answer for more details
Here is the problem with apaul34208 answer,
See how the left and top side of the eye is flat, I would love to know if my question is a browser problem or css.
End Updates
Best option as of 11/13/2013
Using a background gradient on the .eye seems to be the cleanest solution so far. Refer to ScottS answer.
This also does work in Firefox, Chrome, Safari, and IE. (A little ruff in IE bu much better then before)
Any and all help is greatly appreciated!
Source: (StackOverflow)
I need to create a DIV where width=height, and height=100% of the viewport (which, obviously, is variable). In other words, a perfectly square DIV that calculates it's dimensions based on the height of the viewport. Elements within that DIV will take their dimensions as percentages of the parent-DIV's height & width.
It seems to me like this should be simple to do in CSS, but I've gotten stuck with it! Any pointers would be much appreciated.
Source: (StackOverflow)
I'm trying to create a round directional arrow with CSS and HTML. Below are my attempts.
In this I have rotated the <div> and an arrow, but both are in different positions.
This is the CSS:
#curves div {
width: 100px;
height: 100px;
border: 5px solid #999;
}
#curves.width div {
border-color: transparent transparent transparent #999;
}
#curve1 {
-moz-border-radius: 50px 0 0 50px;
border-radius: 50px 0 0 50px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 27px solid #ccc;
float: right;
margin-top: -7px;
margin-right: -26px;
}
<div id="curves" class="width">
<div id="curve1"></div><span class="arrow-right"></span>
</div>
In this the arrow I have created is straight.
.container {
width: 60%;
height: 9px;
background: #ccc;
margin: 100px auto;
-moz-border-radius: 50px 0 0 50px;
border-radius: 50px 0 0 50px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 27px solid #ccc;
float: right;
margin-top: -7px;
margin-right: -26px;
}
<div class="container">
</span><span class="arrow-right"></span>
</div>
Update
I want it something like this
Source: (StackOverflow)
I am trying to create a shape like in the image below with a slanted edge on only one side (for example, the bottom side) while the other edges remain straight.
I tried using the border method (code is given below) but the dimensions of my shape are dynamic and hence I cannot use this method.
.shape {
position: relative;
height: 100px;
width: 200px;
background: tomato;
}
.shape:after {
position: absolute;
content: '';
height: 0px;
width: 0px;
left: 0px;
bottom: -100px;
border-width: 50px 100px;
border-style: solid;
border-color: tomato tomato transparent transparent;
}
<div class="shape">Some content</div>
I have also tried using gradients for background (like in the below code) but it gets messed up as the dimensions change. You can see what I mean by hovering on the shape in the below snippet.
.gradient {
display: inline-block;
vertical-align: top;
height: 200px;
width: 100px;
margin: 10px;
color: beige;
transition: all 1s;
padding: 10px;
background: linear-gradient(45deg, transparent 45%, tomato 45%) no-repeat;
}
.gradient:hover {
width: 200px;
}
<div class="gradient"></div>
How can I create this shape with a slanted side and also be able to support dynamic sizes?
Source: (StackOverflow)
I want to be able to draw a circle with a segment of it another colour, I would like the amount of a segment covered to be able to be increased in increments of 10% from 0% to 100%.
Any examples on Google are all sectors not segments.
So far this is the best I have been able to come up with:
div.outerClass {
position: absolute;
left: 10px;
top: 10px;
height: 2.5px;
overflow: hidden;
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
transform: rotate(270deg);
}
div.innerClass {
width: 10px;
height: 10px;
border: 5px solid green;
border-radius: 36px;
}
<div class="outerClass">
<div class="innerClass"></div>
</div>
0%, 50% and 100% I can all do.
Source: (StackOverflow)