I'm trying to markup tabs as shown on scheme
.tab.active {
position: relative;
background-image: url(http://tirabit.flywebstudio.ru/images/black30.png);
color: #f99734;
}
.tab:hover {
background-image: url(http://tirabit.flywebstudio.ru/images/black20.png);
}
.tab.active:hover {
background-image: url(http://tirabit.flywebstudio.ru/images/black30.png);
}
Current version: http://jsfiddle.net/GrGD9/2/
But i can't understand, how to do so that active tab doesn't have right border.
You can add border-right:0; and it will take it off!
another way is to do:
Border: 1px 1px 1px 0px;
Related
Okay so i want to make a transparent button with some icon / text inside that, on hover, makes the text transparent and the background colored. This is "kinda" my code:
.button-color {
padding: 12px 20px;
border: none;
color: red;
background-color: transparent;
}
.button-color:hover {
color: transparent;
background-color: red;
}
<button class="button-color">Hi!</button>
(The code is way longer but you get the point)
And this is the result:
Unhovered:
Hovered:
I want the background to get transparent where the icon is. Oh and setting the icon to a certain color won't do the trick because these buttons are inside a 3D viewer that has a model loaded . I don't even know if this is achievable with pure css but who knows.
You can get this effect using blend-mode : hard-light as long as the color of the element has RGB values that are 0 or 255. (that is, primary colors).
With this blend-mode, gray (RGB values of 128) is "transparent"
.button-color {
padding: 12px 20px;
border: none;
font-size: 100px;
color: red;
background-color: gray;
mix-blend-mode: hard-light;
left: 10px;
top: 10px;
width: 200px;
}
.button-color:hover {
color: gray;
background-color: red;
}
.container {
background-color: lightgreen;
width: 200px;
}
<div class="container">
<button class="button-color">Hi!</button>
</div>
my problem seems to be quite simple. I want to create the button which is png and has hover via .png also. I need this for email campaigns becouse Outlook doesn't understand some css attributes.
I tried make it simple
.button {
border: none;
background: url(/image1.png);
}
.button:hover {
border: none;
background: url(/image2.png);
}
And everything is just white. Any help will be great :)
according to documentation, you should do it like that,
background: url("/image1.png");
.button {
width: 50px;
height: 50px;
border: none;
background: url("https://i.stack.imgur.com/teLso.jpg?s=48&g=1");
}
.button:hover {
border: none;
background: url("https://graph.facebook.com/160520007817300/picture?type=large");
}
<button class="button"></button>
You have an error, use the simple, or double quotes "" - '', an example:
button{
background: url('https://s-media-cache-ak0.pinimg.com/736x/24/fe/e1/24fee13b4dc475c435984ab0aa1b8ecb.jpg');
background-size: 500px 100px;
background-position: center;
width: 500px;
height: 40px;
}
<button> Example button </button>
Same with any of the other html elements.
The quickest way to demonstrate this is https://jsfiddle.net/9jL30wjh/1/
I have a responsive table that stacks on a mobile device. Pretty simple but I want the white borders on the table to be transparent through to the body background. If I set the borders to transparent then the background of the actual cell is shown so the whole table looks like a block colour (actually an opacity but I don't think this matters). That makes sense I guess but since I cant have a margin on the table cells, I can't decide how to work around this or even if I can in this setup. Can anyone shed any light?
I am using the following CSS for a display: table layout.
body {
background-color: #3498db;
color: #fff;
}
.pcp-table {
display: table;
table-layout: fixed;
width: 100%;
background: transparent;
padding: 10px 0 3px 0;
}
.pcp-table__row {
display: table-row;
width: 100%;
border-bottom: 1px solid;
background: transparent;
}
.pcp-table__cell {
display: table-cell;
background: rgba(255, 255, 255, 0.4);
height: 30px;
line-height: 30px;
padding: 0 10px;
border-right: 7px solid;
border-bottom: 1px solid;
}
I belive I achieved your desired effect. See this fiddle.
All that I do was add the following lines of code
.pcp-table {
border-spacing: 1px;
}
.pcp-table__cell {
border: 0;
}
#media screen and (max-width: 768px) {
.pcp-table {
border-spacing: 0;
}
.pcp-table__cell {
margin-bottom: 1px;
}
}
The trick was not to use an actual border but to simulate it using either border-spacing or margins.
Later edit: Another cool way to achieve this effect is by using background-clip: padding-box; combined with border-color: transparent;. You can see this example in this fiddle.
From background-clip docs:
The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.
For an example, check out this fiddle (not in IE, please).
(You can see a description of the control at this link.)
She uses -ms-fill-lower and -ms-fill-upper to control the color on either side of the thumb, like this:
input[type=range]::-ms-track {
width: 300px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
(source: brennaobrien.com)
However, as far as I can tell, the ... ::-ms- ... pseudo-elements only work in IE. In Chrome, the code above seems to have no effect. In Chrome, I just end up with this:
(source: brennaobrien.com)
What can I do to achieve this effect cross-browser?
Thanks!
You can achieve this effect using gradient, look here: http://codepen.io/ryanttb/pen/fHyEJ
For example:
input::-moz-range-track{
background: linear-gradient(90deg,black 50%,grey 50%);
}
Of course you need js as well to change percentage values.
For anyone else finding this - with HTML5 now standard background-size is a great option if you don't want the fading look of a gradient. I've built my ranges around the tutorial at https://www.w3schools.com/howto/howto_js_rangeslider.asp.
So my solution was in css:
.slidecontainer {
display:inline-block;
vertical-align:middle;
width: 60%;
position:relative;
margin:5px 0;
background:url('/images/cyan_back.png') no-repeat left top;
background-size:0 14px;
border-radius:7px;
}
Then with jquery:
$('.slidecontainer').css('background-size',$(this).val()+'% 14px');
I believe this is also a bit more cross browser friendly.
I'm having trouble figuring out how to apply a split border on an element using CSS.
The effect I'm trying to achieve is this:
Where the red line and the grey line take up a % of the elements width. Preferably, I would like to apply this effect to an element using a single class.
Edit: for those asking for a code sample:
<!-- spans width 100% -->
<div id="wrapper">
<h1 class="title">DDOS Protection </h1>
</div>
Red text and a red underline? There's some simple CSS for this.
<span style='color:red; border-bottom: 1px solid red;'>DDOS</span>
<span style='color:#999; border-bottom: 1px solid #999;'>Protection</span>
Well, assuming that you want to use a single class, and without seeing your exact markup, this will work:
<div class="message">
<span>DDOS</span>
<span>Protection</span>
</div>
And then your CSS could look like this:
.message span {
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
color: #ccc;
}
.message span:first-child {
border-bottom-color: red;
color: red;
margin-right: 10px;
}
Here's a jsFiddle demo.
You can also try to play with :before and :after:
.line {
background-color: #DDD;
padding: 5px 10px;
position: relative;
}
.line:before, .line:after {
content: '';
width: 10%;
height: 2px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}
.line:after {
width: 90%;
background-color: green;
left: 10%;
}
http://jsfiddle.net/DHDuw/
Ok I've made a similar one but that was asked for vertical, but now am changing the gradient direction so that it will help you
Demo (Works On Chrome, If Anyone Knows Cross-Browser, Please Feel Free To Edit, Because Am Using Old Browsers So Won't Be Able To Test)
CSS
div {
font: 40px Arial;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0505), color-stop(50%,#ff0000), color-stop(50%,#000000), color-stop(100%,#000000));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}