Good day to you:)
Firstly I added a css hover effect on jump-link function on blogger, but it hadn't work
Here is my css :
.jump-link a {
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.jump-link a::before {
position: absolute;
top: 100%;
left: 50%;
color: transparent;
content: '\2022';
text-shadow: 0 0 transparent;
font-size: 1.2em;
-webkit-transition: text-shadow 0.3s, color 0.3s;
-moz-transition: text-shadow 0.3s, color 0.3s;
transition: text-shadow 0.3s, color 0.3s;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
}
.jump-link a:hover::before,
.jump-link a:focus::before {
color: #fff;
text-shadow: 10px 0 #fff, -10px 0 #fff;
}
.jump-link a:hover,
.jump-link a:focus {
color: #ba7700;
}
I will be thankful for any help . :)
.jump-link a:hover{color:red;text-decoration:underline;}
Also don't use two :: in .jump-link a:hover::before
For example code below will add a "+" when user hovers any link.
a:hover:before {
content: "+";
}
Related
I have this page with books and animated authors names. Theres around 35 books on the page.
http://kutsalkitap.org/kaynaklar/
When you get your mouse on a book, name of the author fades in and goes down slowly. It look perfect on chrome but, on mozilla, names goes way more down than it should be. Passes through the other books section.
I tried a few things but couldn't managed to fix it. Can someone help me?
Here is my css:
<style>
#nav li.parent {
margin-left: 1px;
width: 740px;
height: 130px;
text-align: center;
border: 1px solid #000;
margin: 10px;
list-style: none;
font-family: Montserrat, sans-serif;
font-size: 24px;
}
/* Effect 9: second text and borders */
#nav li.parent a {
margin: 0 20px;
padding: 18px 20px;
}
#nav li.parent a::before, #nav li.parent a::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: #fff;
content:'';
opacity: 0.2;
-webkit-transition: opacity 0.3s, height 0.3s;
-moz-transition: opacity 0.3s, height 0.3s;
transition: opacity 0.3s, height 0.3s;
}
#nav li.parent a::after {
top: 100%;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
#nav li.parent a span:first-child {
z-index: 2;
display: block;
font-weight: 300;
}
#nav li.parent a span:last-child {
z-index: 1;
display: block;
padding: 8px 0 0 0;
color: rgba(0, 0, 0, 0.4);
text-shadow: none;
text-transform: none;
font-style: italic;
font-size: 0.75em;
font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
#nav li.parent a:hover::before, #nav li.parent a:focus::before {
height: 6px;
}
#nav li.parent a:hover::before, #nav li.parent a:hover::after, #nav li.parent a:focus::before, #nav li.parent a:focus::after {
opacity: 1;
-webkit-transform: translateY(0px);
}
#nav li.parent a:hover span:last-child, #nav li.parent a:focus span:last-child {
opacity: 1;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
}
</style>
inline elements are not cross-browser. in your case consider <span> and <a>. use display: block for those elements or if you don't need those to be block, simply use display: inline-block; vertical-align: top;
that should work for you.
You just remove the <br> tag in between the class "text1" and "text2" in every <a> tag.
HTML:
<span class="text1" style="color:#000;font-size:24px;">Bir Satanistin Anıları</span>
<span class="text2" style="color:#000;font-size:18px;">Hershel Smith</span>
I have faced a wired issue in chrome browser with button css. When I hover this button in chrome(not in firefox) its give unexpected effect.
here is current css:
input[type="button"], .button, button {
font-size: 100%;
transition: none !important;
text-transform: uppercase;
padding: 5px 15px;
line-height: 17px;
border-radius: 0px;
border: 3px solid #DDD;
background: transparent none repeat scroll 0% 0%;
color: #666;
font-weight: bold;
display: inline-block;
vertical-align: middle;
position: relative;
}
input[type="button"]:hover, .button:hover, button:hover {
border-color: #8E7EBF;
color: #FFF;
background: #8E7EBF none repeat scroll 0% 0%;
}
a, span, i {
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
I think you must take a look on theses properties of CSS (line 1058 of theme.css) :
a:hover, span:hover, i:hover
You must used this synthax for better compatibility :
a:hover, button:hover span, button:hover i
You can see the similar problem here : Button:hover not working in Firefox
Hi Write this css in your css file it will fix the problem
a:hover, span:hover, i:hover {
-webkit-transition: initial;
transition: initial;
}
i had same issue on chrome on hover btn class i fixed that adding this class to button
.btn-reset-transform:hover {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;
}
I'm trying to add an effect to a menu I use on a website.
The effect is the first one of the list with a color change added: http://tympanus.net/Development/CreativeLinkEffects/
But when I try to apply it to my case I have a weird problem that happens on the not hovered element. You can see that the elements that are not hovered change opacity and font-size during the hover on an element.
I added the demo here :
a{
text-decoration:none;
}
/* Effect 15: scale down, reveal */
.cl-effect-15 a {
color: #FFF;
text-shadow: none;
}
.cl-effect-15 a::before {
margin-right: 10px;
content:'[';
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
}
.cl-effect-15 a::after, .cl-effect-15 a::before {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
font-size: 12px;
}
.cl-effect-15 a::after {
margin-left: 10px;
content:']';
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
}
.cl-effect-15 a:hover::before, .cl-effect-15 a:hover::after, .cl-effect-15 a:focus::before, .cl-effect-15 a:focus::after {
opacity: 1;
-webkit-transform: translateX(1px);
-moz-transform: translateX(0px);
transform: translateX(1px);
font-size: 14px;
}
.totblockhtml.html_2 {
padding-bottom:10px;
margin-bottom:0px;
}
.totblockhtml.html_2 {
margin-bottom: 0px;
padding-bottom: 9px;
padding-top: 4px;
width: 100%;
float: left;
background: none repeat scroll 0 0 #282F47;
margin-top: -20px;
background-image: url(../img/BlueJean.svg);
}
.totblockhtml.html_2 .block_content {
text-align:center;
color:#ababab;
padding-top: 5px;
}
.totblockhtml.html_2 ul li {
display: inline-block;
margin-left: 70px;
font-size: 14px;
font-family:"trajanpro_regular";
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
}
.totblockhtml.html_2 ul li:first-child {
margin-left:0px;
}
.totblockhtml.html_2 ul li a {
color: #9099AF;
font-size: 11px;
font-family:"Cinzel";
text-transform: uppercase;
letter-spacing: 2px;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
transition: color 0.5s ease;
}
.totblockhtml.html_2 ul li a:hover {
text-decoration:none;
color: #fff;
}
<div class="block totblockhtml html_2">
<div class="block_content">
<ul class="top_menu ">
<li class="top_menu_search cl-effect-15">Rechercher
</li>
<li class="top_menu_sell cl-effect-15">Vendre
</li>
<li class="top_menu_advice cl-effect-15">Conseils
</li>
</ul>
</div>
</div>
Here's the code changing the opacity:
.cl-effect-15 a::after, .cl-effect-15 a::before {
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
and here's the one changing the font-size:
.cl-effect-15 a:hover::before, .cl-effect-15 a:hover::after, .cl-effect-15 a:focus::before, .cl-effect-15 a:focus::after {
font-size: 14px;
}
I set font-size to 12px and opacity to 1, check it out here: jsFiddle
Please, how can I get an effect like the one in the upper right menu, with just CSS3? (mouse over -> circle shrinks and fades in, mouse out -> circle expands and fades out)
http://wpkuzen.com/html/architex/
I tried to look at the code and it's messy, nand couldn' find a tutorial that explain this...
Thanks in advance!
Take a look at this article and demo. They have very similar transitions/animations to the one which you need.
Here's an example:
FIDDLE
Markup:
CSS
.hi-icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 15px 30px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: green;
box-shadow: 0 0 0 4px #FFF;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.hi-icon:before {
content: "X"; /* place image here */
font-size: 48px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}
.hi-icon:hover:after {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
.hi-icon:after {
content: '';
pointer-events: none;
position: absolute;
top: -2px;
left: -2px;
width: 100%;
height: 100%;
border-radius: 50%;
padding: 2px;
z-index: -1;
background: #FFF;
-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
-moz-transition: -moz-transform 0.2s, opacity 0.3s;
transition: transform 0.2s, opacity 0.3s;
}
This effect is done by using the CSS transition. You have one property and instead of change that property instantly (on hover or fadeout) you change that property over time.
Here you have a nice link helping you to hopefully achive your goals. :)
link to transition
I really don't understand your comment "I tried to look at the code and it's messy".
You have a fully indented CSS with comments !
directly copy-pasted from your link:
/* Positioning the icons and preparing for the animation*/
.nav i {
position: relative;
display: inline-block;
margin: 0 auto;
padding: 0.4em;
border-radius: 50%;
font-size: 2.2em;
box-shadow: 0 0 0 30px transparent;
background: rgba(255,255,255,0.1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: box-shadow .6s ease-in-out;
-moz-transition: box-shadow .6s ease-in-out;
-o-transition: box-shadow .6s ease-in-out;
-ms-transition: box-shadow .6s ease-in-out;
transition: box-shadow .6s ease-in-out;
width:1.1em !important;
}
/* Animate the box-shadow to create the effect */
.navbar .nav a:hover i,
.navbar .nav a:active i,
.navbar .nav a:focus i {
box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
-webkit-transition: box-shadow .4s ease-in-out;
-moz-transition: box-shadow .4s ease-in-out;
-o-transition: box-shadow .4s ease-in-out;
-ms-transition: box-shadow .4s ease-in-out;
transition: box-shadow .4s ease-in-out;
}
This is doing my head in, please can someone help? I have made a site, works in Ie9 + 10 and all other browsers, but the animated menu doesnt work in IE8 and there are people using that to view the site..
here is the css:
.menu, .menu ul, .menu li, .menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.menu {
height: 40px;
width: 800px;
background: #f7d000;
background: -webkit-linear-gradient(top, #f7d000 0%,#f7d000 100%);
background: -moz-linear-gradient(top, #f7d000 0%,#f7d000100%);
background: -o-linear-gradient(top, #f7d000 0%,#f7d000 100%);
background: -ms-linear-gradient(top, #f7d000 0%,#f7d000 100%);
background: linear-gradient(top, #f7d000 0%,#f7d000 100%);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 50px;
}
.menu li a {
display: block;
padding: 0 14px;
margin: 5px 0;
line-height: 28px;
text-decoration: none;
font-family: 'Titillium Web', sans-serif;
font-weight: bold;
font-size: 15px;
color: #000000;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a {
border-left: none;
}
.menu li:last-child a {
border-right: none;
}
.menu li:hover > a {
color: #ffffff;
}
.menu ul {
position: absolute;
top: 40px;
left: 0;
z-index: 999;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
background: #f7d000;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.menu ul li {
height: 0;
overflow: visible;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 180px;
padding: 8px 10px;
margin: 0;
border: none;
border-bottom: 1px solid #f7d000;
}
.menu ul li:last-child a {
border: none;
}
The site is: www.softwaretestingawards.com any help would be appreciated!
IE8 does not support CSS3 animations.
See this reference:
http://caniuse.com/#search=css%20tran
You many want to consider using javascript animations, like jQuery.animate
http://api.jquery.com/animate/
The reason it won't work in Internet Explorer 8 is because it does not support CSS3 animations. I recommend you make a script to detect if Internet Explorer 8 is being used and, if it is, dynamically change the website so it doesn't have the fancy CSS3 animations.
to make work the css in IE8 you can try using PIE.htc, refere this site for solution and demos if you want http://css3pie.com/demos/, actually it worked for me :)