The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> css3 problem
sameer
post Jul 25 2013, 06:35 AM
Post #1


Newbie
*

Group: Members
Posts: 14
Joined: 25-July 13
Member No.: 19,470



hi all

this is css code for a button for which arrow marks should be appear on hover....arrow marks are appearign but the direction of transition of both arrowmarks is being same. that is the problem

CODE

a:link, a:visited    { border:2px solid #FFCC33; background-color:#000000; padding:10px 25px; float:left; text-decoration:none; color:#FFFFFF; font-size:15px; position:relative;}
a:after                { content:''; font-size:0px; border-left: 0px solid #FFCC33; border-top:7px transparent solid; border-bottom:7px transparent solid; position:absolute; top: 10px; left:0px;   }
a:before                { content:''; font-size:0px; border-right: 0px solid #FFCC33; border-top:7px transparent solid; border-bottom:7px transparent solid; position:absolute; top: 10px; left: 77px; direction:rtl;   }
a:after, a:before    { transition: 0.5s;}
a:hover:after , a:focus:after    { border-left: 10px solid #FFCC33;}
a:hover:before , a:focus:before    { border-right: 10px solid #FFCC33;}



and this is the html code

<a href="" >Home</a>

pls hav a look
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sameer
post Jul 25 2013, 06:47 AM
Post #2


Newbie
*

Group: Members
Posts: 14
Joined: 25-July 13
Member No.: 19,470



My Webpage

in this file u will find two arrowmarks on hover....the left one is absolutely right but these is broblem with the rightone.....it must start from the right side....pls hav a look.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 25 2013, 07:17 AM
Post #3


.
********

Group: WDG Moderators
Posts: 8,431
Joined: 10-August 06
Member No.: 7



Try something like

CODE
a:before {right:0px;}

But I only get the transition in Firefox, and for some reason the arrows look very blurred in that browser.

BTW, for readability I recommend a more readable structuring of the CSS. Also try removing any unnecessary properties when experimenting, since they'll only distract from the main problem.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sameer
post Jul 25 2013, 08:28 AM
Post #4


Newbie
*

Group: Members
Posts: 14
Joined: 25-July 13
Member No.: 19,470



hey Christian J thanks for your reply i got it.

but may i know the reason behind using

CODE
right:0px


because it is a positioning property.....how it defines the direction of transition?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 25 2013, 09:51 AM
Post #5


.
********

Group: WDG Moderators
Posts: 8,431
Joined: 10-August 06
Member No.: 7



The CSS left or right properties determine from which side edge of the container element the "border arrow box" is positioned. So when the arrow's border edge grows, I guess it must grow away from that side's edge.

If you haven't specified neither a left or right property, the default "growt direction" seems to be determined by the CSS direction property. In fact it seems you can use
CODE
a:link {direction:rtl;}

to make both arrows grow from right to left by default. (Note that I apply the direction property to the link selector, not the generated content selector a:before).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 25 2013, 03:35 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,804
Joined: 9-August 06
Member No.: 6



Looks right to me, if I understand you right. Both arrows point inwards.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 25 2013, 03:40 PM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,804
Joined: 9-August 06
Member No.: 6



So that's why it looked OK when I looked at it after reading the other thread. Threads merged. ninja.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sameer
post Jul 26 2013, 12:33 AM
Post #8


Newbie
*

Group: Members
Posts: 14
Joined: 25-July 13
Member No.: 19,470



oh yes! i understand thanks again, for teaching me something new biggrin.gif

if we dont specify the direction of " a:after " and " a:before " then both arrows are growing from the default left to right direction and as u said i guess border arrow grows from the direction specified.

thanks to all
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sameer
post Jul 26 2013, 01:09 AM
Post #9


Newbie
*

Group: Members
Posts: 14
Joined: 25-July 13
Member No.: 19,470



QUOTE(sameer @ Jul 26 2013, 12:33 AM) *

oh yes! i understand thanks again, for teaching me something new biggrin.gif

if we dont specify the direction of " a:after " and " a:before " then both arrows are growing from the default left to right direction and as u said i guess border arrow grows from the direction specified.

but why transition is working only in mozilla?

thanks to all


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jul 26 2013, 03:02 AM
Post #10


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



You need to add vendor prefixes, like this:
-webkit-transition: ... ;
-moz-transition: ... ;
-o-transition: ... ;
transition: ... ;

Try also Transitions at http://css3generator.com for the correct syntax.
And go see http://css-tricks.com/different-transition...r-on-hover-off/ .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sameer
post Jul 26 2013, 04:28 AM
Post #11


Newbie
*

Group: Members
Posts: 14
Joined: 25-July 13
Member No.: 19,470



CODE


a:link, a:visited    { border:2px solid #FFCC33; background-color:#000000; padding:10px 25px; float:left; text-decoration:none; color:#FFFFFF; font-size:15px; position:relative;}
a:after                { content:''; font-size:0px; border-left: 0px solid #FFCC33; border-top:7px transparent solid; border-bottom:7px transparent solid; position:absolute; top: 10px; left:0px; }
a:before                { content:''; font-size:0px; border-right: 0px solid #FFCC33; border-top:7px transparent solid; border-bottom:7px transparent solid; position:absolute; top: 10px; right:0px;  }
a:after, a:before    { transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-webkit-transition: 0.5s;}
a:hover:after , a:focus:after    { border-left: 10px solid #FFCC33;}
a:hover:before , a:focus:before    { border-right: 10px solid #FFCC33;}



now this is the modified code....working well but only in firefox not in other browsers. i even used all vendor prefix's
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 26 2013, 06:06 AM
Post #12


.
********

Group: WDG Moderators
Posts: 8,431
Joined: 10-August 06
Member No.: 7



Seems most browsers don't support transitions on generated content yet: http://css-tricks.com/transitions-and-anim...erated-content/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jul 26 2013, 08:03 AM
Post #13


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



I didn't look this up for generated content. So, thanks for that link, Christian.
There must be other ways than using generated content to get the effect, though. Maybe by using CSS3 Shapes ( http://css-tricks.com/examples/ShapesOfCSS/ ).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sameer
post Jul 26 2013, 08:40 AM
Post #14


Newbie
*

Group: Members
Posts: 14
Joined: 25-July 13
Member No.: 19,470



yes! there is a problem with generated content.....thanks for the link christian...lets find some other way...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 26 2013, 09:33 AM
Post #15


.
********

Group: WDG Moderators
Posts: 8,431
Joined: 10-August 06
Member No.: 7



Here's one using background-images:

CODE
<style type="text/css" media="screen">
a {
padding: 0 20px;
border: solid red;

background: url(left_arrow.gif) no-repeat -70% center, url(right_arrow.gif) no-repeat 170% center; /* tweak the percent values to fit the image sizes */

-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}

a:hover {background-position: left center, right center;}
</style>

<a href="">link</a>

If you don't want to use image files you can embed the images as data in the stylesheet: http://css-tricks.com/data-uris/

Another idea is to use CSS "border arrows" on SPAN elements instead of generated content:

CODE
<style type="text/css" media="screen">
a {
padding: 0 15px;
position: relative;
border: solid red;
}

.l, .r {
font-size: 0;
width: 0;
height: 0;

position: absolute;

/* trying to put arrows in vertical middle */
top: 50%;
margin-top: -7px;

border: solid transparent;
border-width: 7px 0 7px 0;

-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}

.l {left: 0;}
.r {right: 0;}

a:hover span.l {border-left: 10px solid blue;}
a:hover span.r {border-right: 10px solid blue;}
</style>

<a href=""><span class="l"></span>link<span class="r"></span></a>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jul 26 2013, 10:50 AM
Post #16


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Nice, Christian. Thanks.
The last shapes sample you posted (so I didn't have to create the images) works fine in my latest Safari/Mac.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sameer
post Jul 27 2013, 02:50 AM
Post #17


Newbie
*

Group: Members
Posts: 14
Joined: 25-July 13
Member No.: 19,470



hi Christian...

i think second method i.e., using span is better then using images....
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th May 2020 - 12:14 AM