Any idea how to do this
in CSS?
What I want is them to be together as a whole. Like a div with a hover on it, everytime the user passes the mouse over it, both the line and the text's background will change color. I've tried different approaches but can't seem to get this as a whole. What I have right now is:
http://jsfiddle.net/RmNJL/
HTML
<div class="example">
<span>2014</span>
</div>
CSS
.example {
text-align: center;
border-bottom: 5px solid rgba(0,0,0,0.2);
}
.example span {
background: rgba(0,0,0,0.2);
margin: 10px 0 10px 0;
padding: 5px 20px 5px 20px;
}
.example:hover { border-bottom: 5px solid rgba(0,0,0,0.6); }
.example span:hover { background: rgba(0,0,0,0.6); }
I want them to be together as a single div/unit. So it only changes to the hover color if the user passes the mouse in front of the line or the text. Also, hovering the line would also hover the text background at the same time.
I know it may sound confusing but it's not easy to explain.
Thanks in advance.
I believe you're looking for something like this:
.example {
text-align: center;
border-bottom: 5px solid rgba(0,0,0,0.2);
}
.example span {
display: inline-block;
background: rgba(0,0,0,0.2);
margin: 10px 0 0 0;
padding: 5px 20px 5px 20px;
}
.example:hover { border-bottom: 5px solid rgba(0,0,0,0.6); }
.example:hover span { background: rgba(0,0,0,0.6); }
Related
https://gyazo.com/fbcfb86757bb55d32b3cd3ac1a589bf6
also im a beginner so i may not know stuff that is basic to you guys and i may missed some very basic stuff
.card {
box-shadow: 0 4px 8px 0 #212226;
transition: 0.3s;
width: 20%;
background-color: white;
margin: 7;
border: 1px solid #212226;
display:inline-block;
}
.card:hover {
box-shadow: 10px 10px 25px 0 #212226;
margin: 9;
}
.container {
padding-left: 4px;
display:inline-block;
}
<div class="card">
<div class="container">
<p><b>Number: +38526654165<br>Address: Kissakuja 123<b></p>
</div>
</div>
As I realized you want to enclose the box content with box itself. You can use CSS word-break for this.
p {
word-break:break-all
}
This will break all lines of your texts.
How would I be able to create something like the link above with html and css? Every time I try to make it into a thin line like (box-shadow: 10px 10px 1px #FFE600;) it disappears. Would I just need to create a separate div for this?
Here's my curent code:
HTML
<img src="../images/about.jpg" alt="Yonge and Dundas Street" class="pageimg">
CSS
.pageimg {
width: 37%;
float: right;
margin-left: 100px;
box-shadow: 10px 10px #FFE600;
}
Use multiple box-shadows:
img {
box-shadow:
12px 8px 0 0px white,
14px 6px 0 0px yellow,
14px 10px 0 0px yellow,
10px 10px 0 0px yellow;
}
<img src="https://picsum.photos/200/200?image=1069">
You could also rather use pseudo elements. I do recommend keeping images in containers as it makes working with them easier. It would look something like this.
.image-container{
position: relative;
display: inline-block;
}
.image-container::before{
content: '';
position: absolute;
border: solid 1px yellow;
width: 100%;
height: 100%;
left: 14px; /* This will be your box shadow x-offset; */
top: 14px; /* This will be your box shadow y-offset; */
z-index: 0;
}
and then your html
<div class="image-container">
<img src="../images/about.jpg" alt="Yonge and Dundas Street" class="pageimg">
</img>
In the Reveal focus docs its:
But, as the docs
Reveal focus increases the size of the focus visual, which might cause issues with your UI layout. In some cases, you'll want to customize the Reveal focus effect to optimize it for your app.
How would you approach creating the effect that does not affect the UI in the way described above?
My Reveal focus component:
Reveal glow is box-shadow
Primary focus visual is outline
Secondary focus visual is border
Background
but something seems off and I can't quite grasp it. Is it box-shadow, is it spacing (like margin, I don't set any as you can see), or is it yet something else? How would you fix it if you wanted it to look like on the gif below?
body {
background-color: #000;
padding: 5px 100px;
}
.tile {
display: inline-block;
height: 82px;
background-color: #555555;
}
.x1 { width: 19%; }
.x2 { width: 38%; }
.reveal-focus {
border: 1px solid transparent;
outline: 2px solid transparent;
}
.reveal-focus:focus {
outline-color: #61B250;
box-shadow: 0 0 15px 3px #61B250;
}
The shadow is being placed above elements that appear before the focused one, but below elements after it. You need to add position: relative to all the elements, and z-index: 1 to the focused one.
To make sure this doesn't interfere with any other stacking, apply position: relative; z-index: 0 to the container. This ensures that it has its own stacking context.
The GIF you show appears to also have a slight animation effect, with the glow being more intense for just a moment before fading to normal. This can be achieved quite simply with animation.
body {
background-color: #000;
padding: 5px 100px;
}
.tile {
display: inline-block;
height: 82px;
background-color: #555555;
}
.x1 { width: 19%; }
.x2 { width: 38%; }
.reveal-focus {
border: 1px solid transparent;
outline: 2px solid transparent;
position: relative;
}
.reveal-focus:focus {
border-color: #000;
outline-color: #61B250;
box-shadow: 0 0 15px 3px #61B250;
animation: glowfade 0.4s linear;
z-index: 1;
}
#keyframes glowfade {
from {box-shadow: 0 0 30px 6px #61B250;}
to {box-shadow: 0 0 15px 3px #61B250;}
}
Adjust values as desired.
If you go to this page of the website ( http://portal.escalatehosting.com/clientarea.php ) and look at the border around the white content area, you'll see it's using this code:
#whmcscontent .whmcscontainer {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
clear: both;
}
I want to add that same border around the white content area on this page as well: http://www.escalatehosting.com/why-us.php
However, I can't seem to find in the CSS where exactly the code is that sets the border to know what needs to be changed. Any help would be greatly appreciated.
On the second page, you are actually seeing a background-image create the border.
It is being applied to the class .s-inn-mid.
.s-inn-mid {
width: 976px;
margin: 0;
padding: 7px 12px 6px 12px;
float: left;
background: url(../images/middle.jpg) repeat-y;
}
To make both pages the same, simply remove the background-image and the float.
Updated CSS class
.s-inn-mid {
width: 976px;
margin: 0;
padding: 7px 12px 6px 12px;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
}
I'm trying to get some elements to move slightly when the user mouses over them (they form buttons on a navbar). However, my code doesn't seem to work. The text in the boxes should also be clickable but that doesn't seem to work either. Here's the code:
#navbar {
position: relative;
width: max-width;
height: auto;
margin-left: 2%;
}
.nav_tab{
background-image: url('dark_exa.png');
border: 2px dashed grey;
/* rounded borders of 5px in firefox */
-moz-border-radius:10px;
/* rounded borders of 5px in chrome and other browsers */
-webkit-border-radius:10px;
/* rounded borders of 5px in browsers that support css3 */
border-radius:10px;
/* shadows for different browsers */
-moz-box-shadow: 0 0 0 3px black, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 3px black 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 3px black, 2px 1px 6px 4px rgba(10,10,0,.5);
position: relative;
height: auto;
width:20%;
z-index: -1;
margin-left: 2%;
margin-right: 2%;
top: -30px;
display: inline-block;
}
.nav_tab:hover{
position: relative;
top: +5px;
}
h1 {
font-size:40px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 20px;
margin-top: 130px;
}
h2 {
font-size:30px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 10px;
margin-top: 40px;
}
And the HTML:
<div id="navbar">
<div class="nav_tab"><h2>Zues</h2></div>
<div class="nav_tab"><h2>Jack</h2></div>
<div class="nav_tab"><h2>Denise</h2></div>
<div class="nav_tab"><h2>Joel</h2></div></div>
I'm not entirely sure what's going on here, though I presume it's some kind of parent-child issue.
Thanks.
The link is not clickable because you gave the .nav_tab class a negative z-index value just adjust it to a value => 0 and it'll work.
The z-index: -1; of the .nav_tab css it's your problem, it makes the container behind the page so any mouse event won't work (hover, pointer, etc) remove it and your ready to go:
see the jsfiddle demo:
http://jsfiddle.net/QmVFR/64/