I am making calendar view for my php website.
I have one table with n rows. and in that table odd rows have light green background and even have light pink background.
and after that i have some div which are place on the corresponding tr with z-index: 8 css property.
But i want to give them dark background than their background table row.
Like divs which comes over pink row should have dark pink background and green row divs should have dark green background.
both the table and div are being developed automatically by jquery code.
can anyone help me in this that how can i achieve this ?
I am doing it in jquery fullcalendar resource view .
My some html and css code is :
css :
.fc-border-separate tr th{
background: #BFDBFF;
}
.fc-border-separate tr:nth-child(odd) td{
background: #D7FFD7;
}
.fc-border-separate tr:nth-child(even) td{
background: #FFD5FF;
}
.fc-event {
border-style: solid;
border-width: 0;
font-size: .85em;
cursor: default;
}
a.fc-event,
.fc-event-draggable {
cursor: pointer;
}
a.fc-event {
text-decoration: none;
}
.fc-rtl .fc-event {
text-align: right;
}
.fc-event-skin {
border-color: #36c; /* default BORDER color */
background-color: #36c; /* default BACKGROUND color */
color: #fff; /* default TEXT color */
}
.fc-event-inner {
position: relative;
width: 100%;
height: 100%;
border-style: solid;
border-width: 0;
overflow: hidden;
}
html :
<table class="fc-border-separate tblcalendar">
</table>
<div class='fc-event fc-event-skin fc-event-inner' style='position: absolute; z-index:8'>
</div>
Is this what you're looking for?
The basic idea is to use the pseudo-class :nth-child(odd) and :nth-child(even), like so:
tr:nth-child(odd) {
background-color:lightgreen;
height:60px;
}
tr:nth-child(even) {
background-color:pink;
}
tr:nth-child(odd) div {
background-color:green;
}
tr:nth-child(even) div {
background-color:red;
}
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>
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.
I'm trying to change the color of a link on hover of a <div>. Is that possible using just CSS? If not, how would I achieve this?
div {
border: 1px solid black;
padding: 15px;
}
div:hover {
color: red;
}
<div>
<a href='www.google.com'> www.google.com </a>
</div>
You need to style the anchor, not the div. Try this:
div {
border: 1px solid black;
padding: 15px;
}
div:hover a {
color: red;
}
<div>
<a href='www.google.com'> www.google.com </a>
</div>
The div itself has no text, so there's no place to apply the color property. So when you hover a div with nothing to color, nothing happens.
As mentioned in another answer, apply the hover to the anchor element, which contains text.
But your original code would work if instead of color you used background-color or border.
div {
border: 1px solid black;
padding: 15px;
}
div:hover {
color: red; /* won't work; nothing to color */
background-color: aqua; /* this will work */
border: 2px dashed #777; /* this will work */
}
<div>
<a href = 'www.google.com'> www.google.com </a>
</div>
rjdown's answer is correct, but the question is if you still need the div at all.
All a div does is provide a block for you to style. If you style the anchor as block, you have just that. Code bloat is bad for your SEO and headache-freeness. ;-)
Try this:
a:link {
display: block;
/* make it act as the div would */
overflow: auto;
/* or what you want, but good practice to have it */
border: solid 1px black;
}
a:hover,
a:focus,
a:active {
border: solid 1px red;
}
<a href='www.google.com'> www.google.com </a>
Remember to use more than a color change on your hover or the 1 in 12 males with color blindness won't see a thing, potentially, happening. The focus and active additions are for accessibility too. Especially focus is very important for keyboard users.
Good luck.
We can simply assign inherit value to all the CSS properties of anchor tag ,
Thus when you hover above its container DIV element , it will inherit all the new properties defined inside DIV:hover.
div {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
height: 100px;
width: 100%;
color: white;
background: blue;
}
a {
text-decoration: inherit;
color: inherit;
}
div:hover {
color: orange;
}
<div>
www.google.com
</div>
I have a simple "fill the gaps" excercise in html. There are gaps, looking like this:
Earth closest star is _ _ _ _.
The gaps are not supposed to be fillable on the computer - the document is supposed to be printed with the gaps enpty. But they have a content so, when howered, answers may be checked.
I use border-bottom property to make the gaps. There is a text filled in the gaps but it is white, so the user only can see it on hover.
The CSS:
span.gap {
color: white;
border-bottom: 1px solid black;
}
span.gap:hover {
color: gray;
}
The HTML:
Stephen Hawking is famous for his research of <span class="gap">black holes</span>.
Stackoverflow only helps you if you ask <span class="gap">simple questions</span>.
Browser seems to fix the color from white to black, so the gap content is visible in the printed document. How should I hide the text then?
I cannot use the visibility property, because the border must be visible.
Of all of the image replacement techniques, there are a few that will work without adding extra elements. All of them will require setting a width on the span if you want it to appear inline.
http://jsfiddle.net/TZD84/
span.gap {
display: inline-block;
width: 8em;
white-space: pre;
overflow: hidden;
border-bottom: 1px solid black;
text-indent: 110%;
}
span.gap:hover {
color: gray;
text-indent: 0;
}
If you need to support older browsers, there's always the negative text-indent method
http://jsfiddle.net/TZD84/1/
span.gap {
display: inline-block;
width: 8em;
overflow: hidden;
border-bottom: 1px solid black;
text-indent: -10em;
}
span.gap:hover {
color: gray;
text-indent: 0;
}
You can use CSS media types to handle different display/media situations. I.e add something like this to your CSS:
#media print { .gap { /* add your styles */ }}
Also, in combination with this you could add a separate span that would display only for print. Like:
HTML:
Stackoverflow only helps you if you ask
<span class="gap">simple questions</span>
<span class="print-gap"></span>.
CSS:
span.gap, span.print-gap {
color: white;
border-bottom: 1px solid black;
}
span.gap:hover {
color: gray;
}
#media screen {
span.print-gap { display: none; }
}
#media print {
span.gap { display: none; }
span.print-gap { display: inline-block; width: 100px; }
}
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;
}