I'm looking to achieve this multiple underline effect and figured out that using box-shadows would be the best way to do it. Specifically, I tried doing this and was successful:
I used the following CSS to do it:
h1{
box-shadow: 0 2px 0px 0px #F03A47, 0 4px 0px 0px #FFF, 0 6px 0px #276FBF, 0 8px 0px 0px #FFF, 0 10px 0px #AF5B5B;
float: left;
}
However, I'd like to achieve an effect to turn specific underlines on and off as required. So I came up with this and added the classes to my HTML:
h1{
float: left;
}
.red{
box-shadow: 0 2px 0px 0px #F03A47, 0 4px 0px 0px #FFF;
}
.blue{
box-shadow: 0 6px 0px #276FBF, 0 8px 0px 0px #FFF;
}
.brown{
box-shadow: 0 10px 0px #AF5B5B, 0 12px 0px 0px #FFF;
}
But the effect that it produced was this:
I tried adding the classes in different orders and also adding them dynamically using JavaScript, but I am still getting the same result. Am I doing anything wrong, or is there an alternative way to achieve the turn-on turn-off effect?
This could be accomplished with pseudo elements:
h1 {
display:inline-block;
border-bottom:2px solid #e8353b;
position:relative;
}
h1:before {
content:"";
height:2px;
width:100%;
background:#2762be;
display:block;
position:absolute;
bottom:-6px;
}
h1:after {
content:"";
height:2px;
width:100%;
background:#a3514f;
display:block;
position:absolute;
bottom:-10px;
}
<h1>Hello there</h1>
An interesting way using <span>s :)
You can add as many <span> as you want and just extend the colors palette in CSS:
.borders {
display: inline-block;
}
.borders span {
display: block;
height: 2px;
margin: 2px;
}
.borders span:nth-child(1) { background: red; }
.borders span:nth-child(2) { background: blue; }
.borders span:nth-child(3) { background: green; }
/* Add more here */
<h1 class="borders">
Hi there
<span></span>
<span></span>
<span></span>
</h1>
Or if you need only 3 borders and you don't want to insert additional HTML elements:
use a border-bottom for your first class, than :before on your second class and :after on your third class.
h1 {
position: relative;
display: inline-block;
}
.red{
box-shadow: 0 2px 0 red;
}
.blue:after, .green:before{ content: ""; position: absolute; width: 100%; left: 0; }
.blue:after{
bottom: -6px;
border-bottom: 2px solid blue;
}
.green:before{
bottom: -10px;
border-bottom: 2px solid green;
}
<h1 class="red blue green">Hi there</h1>
You can use linear-gradient, which will be fully transparent.
Note, when combine classes as you did, they doesn't merge those values, the last property set on an element will overwrite any previous, whether they are set in classes with different names or not, hence your line becomes all brown.
body {
background: lightgray
}
h1{
float: left;
padding-bottom: 8px;
background-size: 100% 2px; /* thickness 2px */
background-repeat: no-repeat;
background-position:
left bottom, left bottom 4px, left bottom 8px; /* gutter 2px */
background-image:
linear-gradient(to right, blue, blue), /* bottom line */
linear-gradient(to right, green, green), /* middle line */
linear-gradient(to right, red, red); /* top line */
}
h1.red{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, green, green),
linear-gradient(to right, transparent,transparent);
}
h1.blue{
background-image:
linear-gradient(to right, transparent,transparent),
linear-gradient(to right, green, green),
linear-gradient(to right, red, red);
}
h1.green{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, transparent,transparent),
linear-gradient(to right, red, red);
}
<h1>Hello there</h1>
<h1 class="green">Hello there</h1>
<h1 class="red">Hello there</h1>
<h1 class="blue">Hello there</h1>
You can easily re-position the lines and close any gap by simply leave out the line you don't want.
body {
background: lightgray
}
h1{
float: left;
padding-bottom: 8px;
background-size: 100% 2px; /* thickness 2px */
background-repeat: no-repeat;
background-position:
left bottom, left bottom 4px, left bottom 8px; /* gutter 2px */
background-image:
linear-gradient(to right, blue, blue), /* bottom line */
linear-gradient(to right, green, green), /* middle line */
linear-gradient(to right, red, red); /* top line */
}
h1.red{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, green, green);
}
h1.blue{
background-image:
linear-gradient(to right, green, green),
linear-gradient(to right, red, red);
}
h1.green{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, red, red);
}
<h1>Hello there</h1>
<h1 class="green">Hello there</h1>
<h1 class="red">Hello there</h1>
<h1 class="blue">Hello there</h1>
You can actually do this with only 1 pseudo-element.
Here's what I've done (with comments on how to control spacings):
h1 {
display: inline-block;
/* controls the last line */
border-bottom: 2px solid #a3514f;
}
h1:after {
content: "";
display: block;
/* controls space between 1st and 2nd line */
height: 2px;
width: 100%;
/* controls space between 2nd and 3rd line */
margin-bottom: 2px;
border-bottom: 2px solid #2762be;
border-top: 2px solid #e8353b;
}
<h1>Hello there</h1>
This was written based on #APAD1's answer, taking his idea of using borders.
This method offers the advantage of the whole ::after being part of the content of the <h1>, instead of being outside.
You can add up to five lines using pseudoelements and borders.
Each class adds a new line.
*,
*:before,
*:after {
box-sizing: border-box;
}
h1 {
display: inline-block;
padding-bottom: 2px;
position: relative;
}
h1:before,
h1:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 6px;
bottom: -10px;
}
h1:after {
bottom: -18px;
}
.one {
border-bottom: 2px solid red;
}
.two:before {
border-top: 2px solid blue;
}
.three:before {
border-bottom: 2px solid green;
}
.four:after {
border-top: 2px solid brown;
}
.five:after {
border-bottom: 2px solid orange;
}
<h1 class="one two three four five">Lorem ipsum</h1>
Just trying to get as many lines as posible, using pseudos, borders, shadows ...
You get up to 9 lines, that can be set / unset with 9 independent classes.
Some of them need will only work against a solid, known background-color (white in this case)
.base {
font-size: 60px;
position: relative;
display: inline-block;
}
.base:before,
.base:after {
content: "";
position: absolute;
left: 0px;
width: 100%;
height: 10px;
padding: 10px 0px;
background-clip: content-box;
}
.base:before {
bottom: -90px;
}
.base:after {
bottom: -170px;
}
.a {
border-bottom: solid 10px lightgreen;
}
.b {
box-shadow: 0px 10px white, 0px 20px green;
}
.c:before {
border-top: solid 10px lightblue;
}
.d:before {
background-color: red;
}
.e:before {
border-bottom: solid 10px yellow;
}
.f:before {
box-shadow: 0px 10px white, 0px 20px green;
}
.g:after {
border-top: solid 10px tomato;
}
.h:after {
background-color: magenta;
}
.i:after {
border-bottom: solid 10px gray;
}
.j:after {
box-shadow: 0px 10px white, 0px 20px brown;
}
<h1 class="base a b c d e f g h i j">Hello world</h1>
Related
In the following css I am trying to make the custom component height be 50px. But, takes the height of the child element instead. How can I give the custom component the height of 50px? The custom component is wcia-slider and I am setting the height with css to 50px. Then the child element has height of 100%. The wcia-slider height is being set to the childs height of 100%. I am trying to set the wcia-slider to be 50px via css settings. thank you.
<!DOCTYPE html>
<html>
<head>
<style> 1
wcia-slider {
display: inline-block;
position: relative;
border-radius: 3px;
height: 50px;
width: 500px;
background-image: linear-gradient(45deg, #ccc 25%,
transparent 25%),linear-gradient(-45deg, #ccc 25%,
transparent 25%),linear-gradient(45deg, transparent 75%,
#ccc 75%),linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
.bg-overlay {
width: 100%;
height: 100%;
position: absolute;
border-radius: 3px;
background: linear-gradient(to right, #ff0000 0%, #ff000000 100%);
}
.thumb {
margin-top: -1px;
left: 250px;
width: 5px;
height: calc(100% - 5px);
position: absolute;
border-style: solid;
border-width: 3px;
border-color: white;
border-radius: 3px;
pointer-events: none;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>
<body>
<wcia-slider backgroundcolor="#0000ff" value="180"></wcia-slider>
</body>
<script>
class Slider extends HTMLElement {
connectedCallback() {
this.innerHTML = '<div class="bg-overlay"></div><div class="thumb"></div>'
}
}
if (!customElements.get('wcia-slider')) {
customElements.define('wcia-slider', Slider);
}
</script>
</html>
im creating Vertical tab element by using css and jquery, but i need to show first tab content on page load. i use following line to show first element but its not working.
$('#v-nav>div.tab-content:first-child').show();
im get Vertical tab code from below link, please refer
http://jsfiddle.net/frabiacca/7pM7h/5/
please correct this code to show first tab-content to be default/ onload.
thanks in advance.
Added a default active class to the div and styling display:block; to the .active class.
$(function() {
var items = $('#v-nav>ul>li').each(function() {
$(this).click(function() {
//remove previous class and add it to clicked tab
items.removeClass('current');
$(this).addClass('current');
//hide all content divs and show current one
$('#v-nav>div.tab-content').hide().eq(items.index($(this))).show('fast');
window.location.hash = $(this).attr('tab');
});
});
if (location.hash) {
showTab(location.hash);
}
else {
showTab("tab1");
}
function showTab(tab) {
$("#v-nav ul li:[tab*=" + tab + "]").click();
}
// Bind the event hashchange, using jquery-hashchange-plugin
$(window).hashchange(function() {
showTab(location.hash.replace("#", ""));
})
// Trigger the event hashchange on page load, using jquery-hashchange-plugin
$(window).hashchange();
});
body
{
background-color: #f7f7f7;
}
.wrapper
{
width: 960px;
margin: 0px auto;
padding-top: 20px;
min-height: 600px;
}
.wrapper h1, .wrapper h4, .wrapper p, .wrapper pre, .wrapper ul, .wrapper li
{
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
.wrapper h1 {
vertical-align:middle;
padding-bottom:20px;
}
.wrapper li
{
outline: 0;
text-decoration: none;
-webkit-transition-property: background color;
-moz-transition-property: background color;
-o-transition-property: background color;
-ms-transition-property: background color;
transition-property: background color;
-webkit-transition-duration: 0.12s;
-moz-transition-duration: 0.12s;
-o-transition-duration: 0.12s;
-ms-transition-duration: 0.12s;
transition-duration: 0.12s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#v-nav
{
height: 100%;
margin: auto;
color: #333;
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
}
#v-nav >ul
{
float: left;
width: 210px;
display: block;
position: relative;
top: 0;
border: 1px solid #DDD;
border-right-width: 0;
margin: auto 0 !important;
padding:0;
}
#v-nav >ul >li
{
width: 180px;
list-style-type: none;
display: block;
text-shadow: 0px 1px 1px #F2F1F0;
font-size: 1.11em;
position: relative;
border-right-width: 0;
border-bottom: 1px solid #DDD;
margin: auto;
padding: 10px 15px !important;
background: whiteSmoke; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* W3C */
}
#v-nav >ul >li.current
{
color: black;
border-right: none;
z-index: 10;
background: white !important;
position: relative;
moz-box-shadow: inset 0 0 35px 5px #fafbfd;
-webkit-box-shadow: inset 0 0 35px 5px #fafbfd;
box-shadow: inset 0 0 35px 5px #fafbfd;
}
#v-nav >ul >li.first.current
{
border-bottom: 1px solid #DDD;
}
#v-nav >ul >li.last
{
border-bottom: none;
}
#v-nav >div.tab-content
{
margin-left: 210px;
border: 1px solid #ddd;
background-color: #FFF;
min-height: 400px;
position: relative;
z-index: 9;
padding: 12px;
moz-box-shadow: inset 0 0 35px 5px #fafbfd;
-webkit-box-shadow: inset 0 0 35px 5px #fafbfd;
box-shadow: inset 0 0 35px 5px #fafbfd;
display: none;
padding: 25px;
}
#v-nav >div.tab-content.active {
display: block;
}
#v-nav >div.tab-content >h4
{
font-size: 1.2em;
color: Black;
text-shadow: 0px 1px 1px #F2F1F0;
border-bottom: 1px dotted #EEEDED;
padding-top: 5px;
padding-bottom: 5px;
}
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://benalman.com/code/projects/jquery-hashchange/jquery.ba-hashchange.js"></script>
<section id="wrapper" class="wrapper">
<h1 class="title">I servizi offerti da Evermind</h1>
<div id="v-nav">
<ul>
<li tab="tab1" class="first current">Fatti il sito</li>
<li tab="tab2">Rifatti il look</li>
<li tab="tab3">Organizzati</li>
<li tab="tab4" class="last">Parla di te</li>
</ul>
<div class="tab-content active">
<h4>Fatti il sito</h4>
</div>
<div class="tab-content">
<h4>Rifatti il look</h4>
</div>
<div class="tab-content">
<h4>Organizzati</h4>
</div>
<div class="tab-content">
<h4>Parla di te</h4>
</div>
</div>
</section>
I have a div with tt ID and I write code in JavaScript to add title attribute (tooltip) at runtime code given as:
$("#tt")
.css("left", (mouse.x - 240) + "px")
.css("top", (mouse.y - 258) + "px")
.attr("title", title)
.tooltip('show');
Now I want set color at title attribute. Please suggest me how to make it work.
I am currently using this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
/* Change Blocked with the title you are loo*/
<script>$(document).ready(function(){
$("div[title*='Blocked']").css("background-color", "yellow");});
</script>
/* Everything with the text Blocked in the title will change color*/
<div title="Blocked ality">One</div>
<div title="Blocked">Two</div>
If I understand correctly, you want to change the color of the native title...
Here is a CSS3 way to do that
http://jsfiddle.net/dimshik/tDQWN/8662/
source: https://css-tricks.com/css-content/
body {
padding: 10px;
}
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: red;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
<p>Here is some text and a LINK
with a red title on it. </p>
<p> And here is another one Link eleifend leo.</p>
I need a function to change the appearance of some elements in my HTML page but I am not able to do it.
The problem is that I cannot use a command like
document.getElementById('')
because I need to make the changes effective when the page is already loaded and I use Django and python. My html page looks like this.
<html>
<style type="text/css">
.bs-sidebar.affix {
position: static;
}
.sideheading{
background-color: #e0e0e0;
background-image: -moz-linear-gradient(#fafafa, #e0e0e0);
background-image: -webkit-linear-gradient(#fafafa, #e0e0e0);
background-image: linear-gradient(#fafafa, #e0e0e0);
background-repeat: repeat-x;
display: block;
padding: 10px 10px;
border-bottom: 1px solid #ccc;
color: #222;
font-weight: bold;
font-size: 20px;
line-height: 20px;
border-left: 0 none;
}
/* First level of nav */
.bs-sidenav {
/*margin-bottom: 30px;*/
padding-top: 10px;
padding-bottom: 10px;
background-color: #fafafa;
border-radius: 5px;
border:1px solid #CCC;
}
.bs-sidebar .nav > li > a {
font-size: 1.2em;
display: block;
color: #716b7a;
padding: 10px 20px;
border-right: 4px solid transparent;
}
.bs-sidebar .nav > li > a:hover,
.bs-sidebar .nav > li > a:focus {
text-decoration: none;
background-color: #fff;
border-right: 4px solid #dbd8e0;
}
.bs-sidebar .nav > .active > a,
.bs-sidebar .nav > .active:hover > a,
.bs-sidebar .nav > .active:focus > a {
font-weight: bold;
color: #418cd1;
background-color: #fff;
border-right: 4px solid #418cd1;
}
.xgap{
margin-top:60px;
}
.wrap {
margin: 0 auto;
}
.progress-radial {
float: left;
margin-right: 30px;
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #2f3439;
.progress-radial .overlay {
position: absolute;
width: 60px;
height: 60px;
background-color: #fffde8;
border-radius: 50%;
margin-left: 20px;
margin-top: 20px;
text-align: center;
line-height: 60px;
font-size: 16px;
}
.progress-0 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent),
linear-gradient(90deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-5 {background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%,
transparent), linear-gradient(108deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
</style>
<div class="span6">
<table class="table table-borderless" style="border:1px solid #C0C0C0;background-
color:#FBFBFB;">
<tr><th>First name </th><td>: {{user.first_name}}</td></tr> --> I use
// Django framework user.first_name is from source file
// When the html page is loaded I want to check the td.If td
// has value the profile meter should change from 0% to 10%.
<tr><th>Last Name </th><td>: {{user.last_name}}</td></tr>
<tr><th>Primary mail </th><td>: {{ user.email }}</td></tr>
</table>
</div>
<div class="wrap row">
<div class="progress-radial progress-{{progress}}" style="margin:10px 0px 20px
70px;">-->// here {{progress}}should change according to the td's (i.e)
//initially it is 0% I need a javascript to draw the profile meter.
<div class="overlay">{{progress}}%</div>--> here {{progress}} should change
// according to the td's (i.e) initially it is 0% and it
// should change 10%, 20% and so on according to the td's field.
</div>
</div>
</html>
I need a javascript function for changing the profile meter.
If you want to wait for the page to be done loading just use window.onload, then you can call document.getElementById() inside, which will run when the page is done loading:
window.onload = function() {
// This is only ran after the window is loaded
document.getElementById('myElementsId').style.[css-property] = [change];
}
For example if I wanted to change a color:
window.onload = function() {
document.getElementById("myElementsId").style.color = "blue";
}
If you want a progressbar to fill up to a certain value, try the following:
HTML:
<div class="progressbar"><div class="progress"></div></div>
CSS:
.progressbar {
height: 30px;
position: relative;
border: 1px solid #ccc;
}
.progressbar .progress {
position: absolute;
height: 30px;
left: 0;
top: 0;
width: 0%;
transition: width 0.3s ease-out;
background: #f00;
}
JS:
document.getElementsByClassName('progress')[0].style.width = '10%';
If you call the above JS line at the bottom of the page (right before </body>) it should work like a charm :)
http://www.youtube.com/
You see the "search buttoN". it's really nice.
Just look at their CSS.
.yt-uix-button {
height:2.0833em;
border:1px solid #ccc;
background:#f6f6f6;
background-image:0;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#efefef);
-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#EFEFEF)";
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
white-space:nowrap;
vertical-align:middle;
cursor:pointer;
overflow:visible;
padding:0 .5em;
}
.yt-uix-button:hover {
-webkit-box-shadow: #999 0px 0px 3px;
background: #F3F3F3 -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#EBEBEB));
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#EBEBEB));
border-color: #999;
outline: 0px;
}
You could use jQuery UI button. That will get you most of the way, then you just need to customize a theme to get the look and feel.
Here's a good theme to get you most of the way there.
A combination of background images, colors, and borders.
Depends on how portable you want it to be.
Firefox 3.5 introduced the -moz-box-shadow tag, which you could put into a hover attribute.
It does a few neat CSS3 things, such as
Gradient: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 #F6F6F6
Border Radius: 3px 3px 3px 3px
And it looks like a box shadow on :hover
You can try Zurb css
.awesome{
background: #222 url(/images/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
}