On my site I have links with a box shadow that appears when hovering. You can see it on http://www.lorteau.fr . That works just fine on Chrome, Opera and Firefox. IE however clips the top of it.
Chrome, Opera, Firefox:
IE:
HTML defining the links and all the containers around it:
<body>
<div class="main m-scene" id="page">
<div id="menu">
<a class="menu_link" id="wphone_link" href="wphone.html">Windows Phone</a>
<a class="menu_link" id="wmetro_link" href="wmetro.html">Windows Metro</a>
<a class="menu_link" id="wdesktop_link" href="wdesktop.html">Windows Desktop</a>
<a class="menu_link" id="linux_link" href="linux.html">Linux</a>
<a class="menu_link" id="other_link" href="other.html">Other</a>
</div>
</div>
</body>
CSS3 defining the hovering effect and the containers around it:
.html
{
background-color: #464646;
}
body
{
margin: 0;
}
#page
{
width: 900px;
min-width: 800px;
min-height: 100%;
-pie-box-shadow: 0px 0px 3px 1px #FFFFFF;
-moz-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
-webkit-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
background-image: none;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #3C3C3C;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 7px 5px 6px 32px;
}
#menu
{
height: 57px;
display: block;
width: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
text-align: center;
}
.menu_link, .menu_link:hover
{
font-family: 'Electrolize', Arial, sans-serif;
font-size: 18px;
text-align: left;
color: white;
display: inline;
text-decoration: none;
border-style: solid;
border-width: 1px;
border-color: #777777;
border-radius: 5px;
background-color: #777777;
padding: 5px;
margin-right: 5px;
-webkit-transition: 250ms linear 0s;
-moz-transition: 250ms linear 0s;
-o-transition: 250ms linear 0s;
transition: 250ms linear 0s;
}
.menu_link:hover
{
color: #FFBE5B;
box-shadow: 0px 0px 5px 5px rgba(255, 190, 91, 0.5);
}
.menu_link:active
{
color: #FFBE5B;
}
.m-scene .scene_element
{
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
transition-timing-function: ease-out;
}
I tried all the padding, margin and height combinations I could think of but that didn't change anything. Would some have an idea as to what I could modify so that the shadow isn't clipped on any browser?
Pff never mind. Removed "margin-top: 5px;" from #menu and added "padding-top: 15px;" and that did it.
Spelling out the question clearly always helps!
Related
I have a div that I've got that's circular using border-radius: 50% what I also want to achieve is mimicking something I've already seen implemented on hover.
spacing between the border and the div.
I've tried adding padding: 5px to the hover but it doesn't create a border that's not on the div.
Code
#sub-section .content .icon-div {
background-color: rgba(204, 202, 202, 0.25);
border-radius: 50%;
width: 90px;
height: 90px;
margin-right: auto;
margin-left: auto;
text-align: center;
padding-top: 13%;
margin-bottom: 2em;
transition: all ease .3s;
}
#sub-section .content .icon-div:hover {
border: 1px solid #f6653c;
background-color: #f6653c;
padding: 5px;
transition: all ease .3s;
}
Here's a quick example using an inset box-shadow, as it's less likely to mess with your layout than animating padding:
(Bare in mind, it's not true transparency, the white inner circle is a set colour, which may or may not fit your need)
#example{
display: block;
width: 100px;
height: 100px;
color: #FFF;
text-align: center;
line-height: 100px;
background-color: #f6653c;
border: 2px solid #f6653c;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,1);
transition: box-shadow 0.2s linear;
}
#example:hover{
box-shadow: inset 0px 0px 0px 5px rgba(255,255,255,1);
}
<div id="example">Hover me</div>
You could use a radial gradient:
div {
width: 120px;
height: 120px;
border-radius:50%;
border:1px solid #FA532A;
}
.simple-radial {
background: radial-gradient(#FA532A 54px, rgba(204, 202, 202, 0.25) 2px, white 4px);
}
<div class="simple-radial"></div>
Tooltip CSS
.has-tooltip .tooltip {
position: absolute;
left: 50%;
top: -40px;
opacity: 0;
-webkit-transition: ease-out 300ms opacity;
-moz-transition: ease-out 300ms opacity 0ms;
-o-transition: ease-out 300ms opacity 0ms;
transition: ease-out 300ms opacity 0ms;
-webkit-transition-delay: 0ms;
pointer-events: none;
z-index: 9999;
}
.has-tooltip .tooltip span {
position: relative;
left: -50%;
display: block;
padding: 2px 8px;
font-size: 14px;
color: #fff;
white-space: nowrap;
background: rgba(45, 45, 45, 1);
border: 1px solid rgba(204,204,204,0.60);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
-moz-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
}
View Live Example
What I Am Trying To Achieve
By only having one element, have a tooltip styled as seen in the link above with a tooltip arrow which also has the same look applied to appear to be one element. I've seen multiple which place another element within for the arrow however I'm hoping to achieve this without needing to do so.
Questions
How can I have a tooltip arrow which gives the impression it is part of the tooltip with the same styles applied.
Note: If you provide code, could you please fully explain what you have done so I can implement a top tip as well as a bottom tip.
You could use a pseudo element, i.e. ::before, and by rotate it 45 deg and positioning it about half its height from the bottom so it looks like an arrow.
a.has-tooltip {
position: relative;
transition: opacity 0.5s;
}
a.has-tooltip span {
position: absolute;
left: 20%; top: 50%;
transform: translate(0,-150%);
background: #333;
color: white;
border-radius: 10px;
box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
padding: 10px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s;
border: 4px solid #999;
}
a.has-tooltip span::before {
content: '';
position: absolute;
left: 20%; top: calc(100% - 10px);
height: 20px; width: 20px;
transform: rotate(45deg);
background: inherit;
box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
z-index: -1;
border: inherit;
border-width: 0 4px 4px 0;
}
a.has-tooltip:hover span {
opacity: 1;
}
<br><br><br>
<a href="#" class="has-tooltip" id="link"><span>Hi! I'm a tooltip!</span>
Hi! I'm a link!
</a>
Updated based on a comment
When one make a shadow like this, and as it is actually a square, their 2 shadows intersect
a.has-tooltip {
position: relative;
transition: opacity 0.5s;
}
a.has-tooltip span {
position: absolute;
left: 20%; top: -10%;
transform: translate(0,-150%);
background: #333;
color: white;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
-moz-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
padding: 10px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s;
border: 1px solid #FFFFFF;
}
a.has-tooltip span::before {
content: '';
position: absolute;
left: 10%; top: calc(100% - 10px);
height: 20px; width: 20px;
transform: rotate(45deg);
background: inherit;
-webkit-box-shadow: 4px 4px 0px 2px rgba(0,0,0,0.50);
-moz-box-shadow: 4px 4px 0px 2px rgba(0,0,0,0.50);
box-shadow: 4px 4px 0px 2px rgba(0,0,0,0.50);
z-index: -1;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
a.has-tooltip:hover span { opacity: 1; }
<br><br><br><br>
<a href="#" class="has-tooltip" id="link"><span>Hi! I'm a tooltip!</span>
Hi! I'm a link!
</a>
To fix that is almost impossible, unless one use a SVG, though here is 2 possible solutions.
Give the shadow a non transparent color
a.has-tooltip {
position: relative;
transition: opacity 0.5s;
}
a.has-tooltip span {
position: absolute;
left: 20%; top: -10%;
transform: translate(0,-150%);
background: #333;
color: white;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 0px 6px rgba(128,128,128,1);
-moz-box-shadow: 0px 0px 0px 6px rgba(128,128,128,1);
box-shadow: 0px 0px 0px 6px rgba(128,128,128,1);
padding: 10px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s;
border: 1px solid #FFFFFF;
}
a.has-tooltip span::before {
content: '';
position: absolute;
left: 10%; top: calc(100% - 10px);
height: 20px; width: 20px;
transform: rotate(45deg);
background: inherit;
-webkit-box-shadow: 4px 4px 0px 2px rgba(128,128,128,1);
-moz-box-shadow: 4px 4px 0px 2px rgba(128,128,128,1);
box-shadow: 4px 4px 0px 2px rgba(128,128,128,1);
z-index: -1;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
a.has-tooltip:hover span { opacity: 1; }
<br><br><br><br>
<a href="#" class="has-tooltip" id="link"><span>Hi! I'm a tooltip!</span>
Hi! I'm a link!
</a>
Use the other pseudo, ::after, as the shadow, which will be transparent. With this one need to play a little with the size of the main shadow and the position of the ::after pseudo.
a.has-tooltip {
position: relative;
transition: opacity 0.5s;
}
a.has-tooltip span {
position: absolute;
left: 20%; top: -10%;
transform: translate(0,-150%);
background: #333;
color: white;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.50);
-moz-box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.50);
box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.50);
padding: 10px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s;
border: 1px solid #FFFFFF;
}
a.has-tooltip span::before {
content: '';
position: absolute;
left: 10%; top: calc(100% - 10px);
height: 20px; width: 20px;
transform: rotate(45deg);
background: inherit;
z-index: -1;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
a.has-tooltip span::after {
content: '';
position: absolute;
left: calc(10% - 5px); top: calc(100% + 6px);
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 16px solid rgba(0,0,0,0.50);
z-index: -2;
}
a.has-tooltip:hover span { opacity: 1; }
<br><br><br><br>
<a href="#" class="has-tooltip" id="link"><span>Hi! I'm a tooltip!</span>
Hi! I'm a link!
</a>
Is it possible to scale a text input only on the X axis while maintaining the size of the font?
I did something like this:
#searchInput {
text-decoration: none;
display: inline-block;
background-color: rgba(0, 0, 0, 0);
border: none;
border-bottom: 3px solid transparent;
width: 10px;
border-bottom-color: blue;
padding-left: 10px;
padding-bottom: 5px;
height: 40px;
font-size: 30px;
color: #307fff;
transition: 1s ease;
transform-origin: top left;
}
#searchInput:hover {
border-bottom: 3px solid blue;
transform: scaleX(25);
}
#searchInput:focus {
border-bottom: 3px solid blue;
transform: scaleX(25);
}
<input type="text" id="searchInput" name="search">
The result is the cursor on the middle of the input and the text stretched
Doing the same animation changing the width instead of scaling the input works, but I'm curious if it can be done with a transform.
Its not the correct way to implement this material type input text. Use background-position on :focus, :valid on the bottom border of input.
You should use something like the snippet below:
input::-webkit-input-placeholder, button {
transition: all 0.3s ease-in-out;
}
input {
margin: 40px 25px;
width: 200px;
display: block;
border: none;
padding: 10px 0;
border-bottom: solid 1px #1abc9c;
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
background-position: -200px 0;
background-size: 200px 100%;
background-repeat: no-repeat;
color: #0e6252;
}
input:focus, input:valid {
box-shadow: none;
outline: none;
background-position: 0 0;
}
input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
color: #1abc9c;
font-size: 11px;
transform: translateY(-20px);
visibility: visible !important;
}
<input placeholder="Username" type="text" required="">
Hope this helps!
I think you would need to work with the width rather than using scale. This way the input will change width without applying any scaling to its content.
#searchInput {
text-decoration: none;
display: inline-block;
background-color: rgba(0, 0, 0, 0);
border: none;
border-bottom: 3px solid transparent;
width: 10px;
border-bottom-color: blue;
padding-left: 10px;
padding-bottom: 5px;
height: 40px;
font-size: 30px;
color: #307fff;
transition: 1s ease;
}
#searchInput:hover {
border-bottom: 3px solid blue;
/*
Instead of using scale just change the width
your transition will take care of animation
*/
width: 250px;
}
#searchInput:focus {
border-bottom: 3px solid blue;
width: 250px;
}
<input type="text" id="searchInput" name="search">
I'm trying to replicate the navigation buttons here, that's a wix website so it's so hard to inspect elements.
What I have tried is here
https://jsfiddle.net/1vngy4uo/1/
I'm trying many variations, never getting the css 100% correct.
.navButton {
width:15%;
display:inline-block;
position:relative;
background-color:#03314b;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton:hover {
background-color:#98b7c8;
}
.navButton span {
width:100%;
display:inline-block;
position:absolute;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton .bg {
height:50%;
top:0;
background-color:#3a6076 ;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton:hover .bg{
background-color:#afcad9;
}
.navButton .text {
position:relative;
text-align:center;
color:#fff;
vertical-align: middle;
align-items: center;
}
.navButton .text:hover {
color:#000000;
}
and html
<a href="contact.html" class="navButton">
<span class="bg"></span>
<span class="text">Contact</span>
A very similar one, using linear-gradient and less HTML markup
jsFiddle
.navButton {
color: white;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: center;
padding: 0 30px;
line-height: 30px;
display: inline-block;
position: relative;
border-radius: 20px;
background-image: linear-gradient(#335b71 45%, #03324c 55%);
box-shadow: 0 2px 2px #888888;
transition: color 0.3s, background-image 0.5s, ease-in-out;
}
.navButton:hover {
background-image: linear-gradient(#b1ccda 49%, #96b4c5 51%);
color: #03324c;
}
Contact
I just used a div element to implement the same button that you referred. Is this what you want?
https://jsfiddle.net/9L60y8c6/
<div class="test">
</div>
.test {
cursor: pointer;
background: rgba(4, 53, 81, 1) url(//static.parastorage.com/services/skins/2.1212.0/images/wysiwyg/core/themes/base/shiny1button_bg.png) center center repeat-x;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
transition: background-color 0.4s ease 0s;
position: absolute;
top: 0;
bottom: 0;
left: 5px;
right: 5px;
height: 30px;
width: 115px;
}
Would this be a start? You might want to adjust the colors a little.
Note: One can use linear-gradient, though it won't work on IE9, so I use a pseudo instead
.navButton {
width: 15%;
display: inline-block;
position: relative;
background-color: #03314b;
border-radius: 8px;
box-shadow: 2px 2px 2px #888888;
text-align: center;
text-decoration: none;
color: #fff;
padding: 5px;
transition: all 0.3s;
overflow: hidden;
}
.navButton:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
background-color: #335b71;
transition: all 0.3s;
}
.navButton span {
position: relative;
}
.navButton:hover {
transition: all 0.3s;
background-color: #96b4c5;
color: black;
}
.navButton:hover:before {
transition: all 0.3s;
background-color: #b1ccda;
}
<a href="contact.html" class="navButton">
<span>Contact</span>
</a>
I am trying to set up navigation links (using a list) that are entirely clickable. However, right now only the text and images are clickable. Display block doesn't seem to be working.
Here is the final result: http://rec.wordpress.uconn.edu
#program-buttons {
display:block;
width:100%;
height:65px;
background-color:#cccccc;
}
.program-button {
display:block;
float: left;
font-size: 14px;
height: 45px;
line-height: 17px;
list-style-type: none;
margin:0;
padding: 10px;
width: 208px;
vertical-align:middle;
border-left: solid 1px #ffffff;
border-right: solid 1px #8C8C8C;
transition: background 0.4s ease;
-webkit-transition: background 0.4s ease;
-o-transition: background 0.4s ease;
-moz-transition: background 0.4s ease;
}
.program-button:hover {
background-color:#202631;
}
#program-buttons .program-button a {
display:block;
color:#fff;
font-weight:bold;
}
#program-butt ons .program-button a:hover {
text-decoration:none;
}
#program-buttons img {
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: none;
background-origin: padding-box;
border-bottom-color: rgb(255, 255, 255);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(255, 255, 255);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(255, 255, 255);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(255, 255, 255);
border-top-style: solid;
border-top-width: 1px;
box-shadow: rgba(0, 0, 0, 0.199219) 1px 2px 2px 0px;
color: rgb(46, 44, 42);
cursor: auto;
display: block;
float: left;
height: 45px;
list-style-type: none;
margin-right: 10px;
margin-top: 0px;
text-align: -webkit-auto;
text-decoration: none;
text-shadow:
rgba(255, 255, 255, 0.296875) 0px 1px 0px;
width: 60px;
}
<ul id="program-buttons" class="clearfix">
<li class="program-button"><img src="http://www.recsports.ufl.edu/images/uploads/KanJam_thumbnail_1.jpg" width="60" height="45" alt="Title"> <span>Intramural<br> Sports</span></li>
<li class="program-button"><img src="/images/uploads/KanJam_thumbnail_1.jpg" width="60" height="45" alt="Title"> <span>BodyWise</span></li>
<li class="program-button"><img src="/images/uploads/KanJam_thumbnail_1.jpg" width="60" height="45" alt="Title"> <span>UConn<br> Outdoors</span></li>
<li class="program-button"><img src="/images/uploads/KanJam_thumbnail_1.jpg" width="60" height="45" alt="Title"> <span>Drop-In<br> Rec</span></li>
</ul>
The issue is that your li tags have 10px padding. Move that padding to the a tags instead.
Edit: And remove the fixed heights.
actually I think you misunderstand what display:block does. Your li items will never be clickable, that is not their purpose. You need to style the a elements so that they take up all the space that your li elements do now.
The simple solution is to just remove the "program-button" class from the li elements, and apply to the a elements. That will do all the styling directly on the link, no further changes needed (checked on Chrome on your site)
I suggest that you add width:100% and height:100% to your href.
li.program-button a {
... etc ...
display: block;
width: 100%;
height: 100%;
}
If you want the entire button area to be clickable, consider moving the padding from your LIs to your href.
li.program-button {
... etc ...
width: 228px;
height: 65px;
padding: 0px;
}
li.program-button a {
... etc ...
display: block;
width: 100%;
height: 100%;
padding: 10px;
}