SQLite How to by Tag:
You can use box-shadow (Hover to see it ) button { width: 200px; height: 100px; background: cornflowerblue; border-radius: 5px 25px 5px 25px; border-bottom: 2px solid black; border-top: 2px solid black;...
I did it with pure css in this example using 4 extra divs: If youre worried about overflow you can just wrap it in an extra div. JS FIDDLE css:...
you could use figure and figcaption to structure your html. Inline-block, vertical-align and margin to set image aside text figure { margin-left:50px;/* half image width */ background:black; box-shadow:0 0 1px;...
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...
I have used 2 div's with box-shadow i have added border for understanding body { background:url(https://placeimg.com/640/480/any); } .out { width: 455px; height: 275px; border: 1px solid red; position: relative; overflow:...
Updated Answer (Pure CSS3) Extreme requirements sometimes need extreme solutions. I've built upon my original answer (below) to make a pure css solution that works (and can be made to...
jsBin Demo A quick introduction, what it takes to create a <span class="ribbon">FREE</span> ribbon shape?: .ribbon{ display:inline-block; height:0; border-bottom:20px solid gold; border-left:20px solid transparent; border-right:20px solid transparent; } Now, using...
Here's a demo: http://jsfiddle.net/thirtydot/dQR9T/2637/ HTML: <div class="numberCircle">30</div> CSS: .numberCircle { border-radius: 50%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ width: 36px; height: 36px; padding: 8px; background:...
Use both :before and :after pseudo elements. Sample: http://jsfiddle.net/8efLr/1/ .feature-icon { width: 100px; height: 100px; position: relative; margin-top: 25px; display: inline-block; } .feature-icon:before{ position: absolute; display:block; content: ""; width:100px; height:100px;...
Here's an example with a box-shadow, all latest version browsers should support this http://jsfiddle.net/MZXCj/1/ HTML: <div id="toolTip"> <p>i can haz css tooltip</p> <div id="tailShadow"></div> <div id="tail1"></div> <div id="tail2"></div> </div> CSS:...
Just do this DEMO - 1 (border top or bottom) .menu { width:30px; height:20px; position:relative; display:inline-block; border-top:4px solid black; } .menu:after, .menu:before { content: ''; width: 100%; height:4px; background-color:#000; position:absolute;...
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...
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...
My Cross-Browser, CSS-only version of the Facebook-style textbox: HOW TO I've used :before on the inner container div (with 7px collapsed borders, three transparents, one white) to create a triangle...
Visit this link for all possible shapes CSS Shapes for round shape #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } /* Cleaner, but...
Just create a rectangle and skew the Y axis using the CSS3 transform property. In this case, transform: skewY(-20deg) will work. .shape { border: 2px solid; height: 200px; width: 100px;...
One solution would be to use two angled linear-gradient strips - one on the left and other at bottom of the button element. Imagine placing at 10px x 10px square...
you may use mix-blend-mode and eventually the other pseudo : DEMO #star8:after { content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; transform: rotate(135deg); box-shadow: 0 0...
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...
skew a parent element (LI) and inverse skew it's children elements nav li { display:inline-block; transition: background 0.2s; transform: skew(20deg); /* SKEW */ } nav li a { display:block; text-decoration:none;...
It's not difficult. You create a circle within a wrapper that clips out what you don't need. demo HTML: <div class='shape-wrap'> <div class='shape'></div> </div> Relevant CSS: .shape-wrap { overflow: hidden;...
You could define three different CSS classes - one class for every shape. Note that classes in style sheets start with a dot "." and are applied to a DOM...
You could use two triangles on :before and :after :pseudo-elements. div { position: relative; width: 100px; height: 40px; border: 4px solid black; } div:after, div:before { content: ''; position: absolute;...
A real draw would look like this *{box-sizing: border-box} :root{background: #ccc} div{ width: 150px; height: 150px; border-radius: 50%; position: relative; margin: 40px auto; box-shadow: 0 0 0 10px white }...
DEMO <span class="box"> This is a tooltip! </span> .box{ position:relative; background:#000; color:#fff; display:inline-block; padding:15px; border-radius:5px; } .box:after{ position:absolute; content:''; left:50%; margin-left:-10px; top:-20px; border: 10px solid transparent; border-bottom: 10px solid #000;...
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...
I think you are looking for this. css .hex { position: relative; margin: 1em auto; width: 10em; height: 17.32em; border-radius: 1em/.5em; background: orange; transition: opacity .5s; } .hex:before, .hex:after {...
Not exactly cross-browser but works. Hope I've understood your request. http://jsfiddle.net/wmDNr/3/ .triangle { position: relative; width: 20px; margin-top: 100px; } .triangle>div { width: 20px; height: 2px; background: red; margin-top: 100px;...
You can use transform: skewY(20deg) to do this. You should also consider the transform origin (the point on the element from where the transformation is calculated). In this case I...
The below answer is not an actual 3D shape. It only gives a slight illusion of being 3D, however, depending on your use case, you may be able to 'fake'...