SQLite How to by Tag:
Cog and chain animation : I totaly refactored the code (CSS and HTML), it is now : shorter (especialy the css) simpler more realistic: corrected the synchronisation issue bteween the...
With the following HTML: <div id="arcs"> <div> <div> <div> <div></div> </div> </div> </div> </div> And the CSS: #arcs div { border: 2px solid #000; /* the 'strokes' of the arc...
Check The Shapes of CSS, it's an excellent source for many types of shapes created with CSS. I've created a JSFiddle for you with the expected result. .full-width-wrap { width:...
There can be several approaches to make your catterpillar responsive. You could use svg, multiple elements/pseudo elements, box-shadows... Here is an example using multiple box shadows and the appraoch described...
Add the background color to the parent div to fill in the gap Place the border-radius on the parent div to create the two rounded corners Move the :before...
If you really only want to use the 'nth-child' then use the following: First row: table tr:nth-child(1) td:nth-child(3), table tr:nth-child(1) td:nth-child(5) { background-color:red; } So, in your table, the first...
How about something like this i used svg Fiddle <svg width="1000" height="500"> <polygon points="100 10, 50 245, 100 500, 200 500, 200 10,100 10" fill="orange" /> <polygon points="400 10, 460...
Disclaimer: I don't believe this approach is the best to create the shape you are after. Depending on your use case, you should look into SVG or a normal...
margin:auto won't work if you have absolutely positioned divs so to center the hexagon, you have to add top:50%, left:50% and margin: -86.6px 0 0 -150px. The -86.6px is half...
You can first create rectangle with border-radius and add triangle with :after pseudo-element. .shape { width: 200px; height: 50px; background: #B67025; margin: 50px; border-radius: 25px; position: relative; } .shape:after {...
You could use a border trick with some pseudo elements for this: .onecorner, .twocorners { height: 50px; width: 300px; line-height: 50px; text-align: center; background: lightgray; margin-left: 25px; margin-right: 25px; position:...
JSFiddle is here. Note: The original content is here. HTML <p>Vestibulum mollis mauris <a href="#" class="tooltip" title="Sample tooltip">pellentesque</a></p> CSS .tooltip { display: inline; position: relative; } .tooltip:hover { color: #c00;...
Using CSS: You can do this with CSS using rotate transform with a bit of perspective added to it. button { position: relative; background: yellowgreen; border: none; height: 60px; line-height:...
I like stuff like this as I always mess around to create things like this. So here is how I would do it. Using :before and :after we can create...
Percentage height is calculated based on the height of the first positioned parent. In this case, the #keys and #kbd divs don't have a position CSS rule. This means the...
You have to edit the position of the :before & :after selectors. .dropdown-menu:before { position: absolute; top: -7px; left: 9px; /* Example: right:10px; */ display: inline-block; border-right: 7px solid transparent;...
Here's an example of what Harry mentioned .triangle{ border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:300px solid red; } <div class="triangle"></div> ...
You could try something like this: .header { padding-top:26px; padding-left:40px; position:relative; } .i { position:absolute; width:80px; height:80px; border-radius:50%; top:0; left:0; } .headingText { color:white; background:black; display:inline-block; width:350px; padding-top:10px; padding-bottom:10px; text-align:center;...
You can do this using svg's clipPath and filters for the box-shadow. The co-ordinates for the triangle were calculated using the formula for a co-ordinate on a circle: (x, y)...
You need 4 pseudo elements to create this properly, because triangles are created using borders, so they can't have a border and different background-color. We therefore need an inner and...
SVG Complex shapes can be hard to achieve in CSS. I would recommend using SVG to create this shape <svg viewBox="0 0 100 100" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> <clipPath id="clip">...
If you have a plain background color, you can do this with pseudo elements : DEMO HTML : <section class="stage"> <figure class="line"></figure> </section> CSS : .line { height: 8px; position:relative;...
Im not sure I understood the question, but I'll try to answer. You can't use something like cos() to arrange elements on HTML, you will have to use negatives margin-top:...
My best attempt: http://dabblet.com/gist/4592062 Pixel perfection at any size, uses simpler math than Ana's original solution, and is more intuitive in my opinion :) .triangle { position: relative; background-color: orange;...
You can create this by placing after and before pseudo-elements the after pseudo-element is skewed to make the slanted edges. Note:This may not be the best solution i would suggest...
You could do this using svg's mask. You can change the width and height by changing the #container's width and height. #container { width: 80px; height: 100px; } <div id="container">...
For this transparent cut-out hexagon, I would suggest using an inline SVG with the path element: svg{ display: block; width: 70%; height: auto; margin: 0 auto; } path{ transition: fill...
You can use multiple linear-gradient images as background for the parent div container like shown in the below snippet. This is one way to achieve it without adding any extra...
Can border be applied to a clipped element along the clip path? No, adding border property to the clipped element would not apply the borders along the clipped path because...
All you have to do is to change border-radius: 40px to border-radius: 50%. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> <title>Oval</title> <style type="text/css"> .oval { width: 160px; height:...