How to make a circle breadcrumb with only css
Tags: html5,css3
Problem :
Has anyone seen a available css3 solution to implement the above? I'd like to find a way without requiring images and also not rewrite something that others have likely already solved well. Anyone know of any existing solutions? Thanks
Solution :
Quite simple using CSS3's border-radius property:
LIVE DEMO with a bit of CSS3 anim + jQuery
HTML
<span class="btnz">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</span>
CSS:
.btnz>span{
display:inline-block;
width:10px;
height:10px;
background:#C0CCD7;
border-radius:7px;
border:1px solid #C0CCD7;
border-top:1px solid #9DA7AF;
margin:0 3px;
}
.btnz>span.active{
background: #63C000;
border: 1px solid #5FAF0E;
border-bottom: 1px solid #39660F;
}
More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
CSS Howto..
You need to define height and width, try this: span { font-size: 10px; position: relative; border: 1px solid #000; border-radius: 50%; width: 20px; height: 20px; display: inline-block; text-align: center; line-height:...
If I understood you correctly you want to append a new text to every image that gets called. In order to do this I suggest you add this function and...
You can do It like this : $("#show-password").on('change' , function(){ if($(this).is(':checked')){ $('#password').tooltip({title : $('#password').val(), placement:'right',trigger:'manual'}); $('#password').tooltip('show'); } else{ $('#password').tooltip('destroy'); } }) $('#password').on('keyup' , function(){...
Updated Answer for Many Levels This utilizes a variation of option 2 below in my original answer, which means LESS 1.3.1+ needs to be the version used. This actually ends...
try like this: Demo body{ animation: background-fade 10s infinite; } @keyframes background-fade { 0% { background:red; } 50% { background:blue; } 100% { background:green; } } You need to use...
Try this - http://jsfiddle.net/zYx4g/ This will work on image of any size and in all browsers. .image_container { width: 300px; height: 300px; background: #eee; text-align: center; line-height: 300px; } .image_container...
You can include the toggle-menu-wrap element in your HTML from the start. There is no need to insert it using JS. Write the one line of CSS you need,...
Just set opacity to 0 in CSS file itself. To cover the scriptless, add the following to your head: <noscript><style>#header { opacity: 1; }</style></noscript> Update: since that's not an option,...
Let's try to clean your code a little. Let's suppose that toggle is a boolean variable defined previously in the page although this is bad and you should use view...
Just do like this HTML <table style='width: 150px; border: 1px solid black;'> <tr> <td>blablabla</td> <td>blablabla</td> </tr> <tr> <td>abcd</td> <td>abcd</td> </tr> </table> CSS table { width:600px!important; border:1px solid black; } ...
Set line-height:18pt for your hover, it will stop the anchor increasing it's original height: a.nav:hover { color: red; font-size: larger; line-height:18pt; } Example fiddle...
When your parent width is smaller than width of image, image width will take 100% of parent width. If parent width is bigger than image width, image width will stay...
You should make those buttons go down with Javascript. Simply add an event listener on the page scroll (as you already do) and, as the user scrolls, add the difference...
Simply give your <li> elements a margin. For example: ul li { margin: 0 0 10px; } To avoid extra spaces below the list you can remove the last margin...
If you want to do this, you'll need a little help from javascript. The idea is to get the width of the window, and than to distribute it in between...
Not really knowing what's asked, I'll just provide a way to match (HEX) colors within an HTML element. Given HTML: <p id="subject"> Here is a color: #fff. Red is #ff0000...
If you want to have 3 differnet areas on the screen, the effective method for doing that would be: <style> .third { width: 33.33%; float: left; } </style> <div class="third">...
Please try the following: @media screen and (min-width: 40rem) and (max-width: 60rem) { #div1 { float: left; width: 200px; /* change this value to your own needs */ } #div2...
In your click handler, you can check the element that was clicked on, if it's not body (meaning it's a child), then don't do anything. document.getElementById('body').onclick = function(e) { //...
the answer is line-height in css check this fiddle http://jsfiddle.net/elviz/qvzk1eoj/1/ .sample{ height: 50px; background-color: red; line-height: 50px; } ...
you can try this one: .counter-inner { width: 763px; margin: 0 auto; } .counter-inner ul { list-style: none; } .counter-inner ul li { float: left; background: red; } .counter-image {...
OK, I'm not sure if you mean that the tooltips' positions should be fixed relative to their respective thumbnails, or that all tooltips should appear in a single fixed position....
Here's an example of how you can do that: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .wrap { overflow:auto; width:600px; height:220px; padding:10px; } .inner { float:left; margin:0 -32767px...
One of possible options is to use absolutely positioned generated content (:before for left "border", and :after for right one) with 100% height and CSS Gradients as background of generated...
add display: block; a-tag is an inline element so your height and width are ignored. #header div#snav div a{ display:block; width:150px; height:77px; } ...
Using CSS calc() .frameArea .frame { ... height: calc(100% - 25px); } DEMO calc() is not compatible with older browsers and thus might give you compatibility problems, to overcome this...
For users who have encountered a similar problem, there are steps that I've done to get it working, I'm not sure that this equilibrium way. npm install file-loader --save add...
Your div id is test not testjquery $("#test").hover(function () { $(this).css({ 'cursor': 'hand', 'cursor': 'pointer' }); }); Update you can only use $("#test").hover(function () { $(this).css({ 'cursor': 'pointer' }); });...
I tested CSS border property but it decrease width of actual content. Yes, you'd have to adjust the rest of your layout to account for the border of x pixels...
Perhaps I miss the point, but it sounds like you've answered your own question. You seem to know that you can wrap hi and john in span tags and then...