SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Edge Smoothness of CSS3 Rotation

    There are very nice CSS3 available now: roatate, scale, skew etc. But when I tested it, it was not smooth. For example, I made a navigation bar with 10deg rotation to each button. But I saw that the edge of the buttons are not smooth. It seems just like a low-res photo is zoomed. But why this happens.

    Just look at the edges of my uploaded image, they are not smooth at all.

    34hyouh.png

    Click the image to get the bigger version

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Some browsers do it better than others. Could you post your code, and tell us what browser/system this was in?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I used Firefox 10.0.2

    I have also seen the problem in Chrome, and it doesn't happen with rotate only, it happens with skew too. Here's my code of navigation css.

    Code:
    nav {
    	position: relative;
    	margin-top: 40px;
    	width: 100%;
    	font-family: Georgia, Arial, Tahoma, Calibri, sans-serif;
    	height: 41px;
    	background: transparent;
    }
    nav li ul {
    	display: none;
    }
    nav ul, nav li {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    }
    nav li {
    	float: left;
    	position: relative;
    	margin-right: 6%;
    }
    nav ul li a {
    	display: block;
    	padding: 5px 10px;
    	background: #D68215;
    	text-decoration: none;
    	color: white;
    	font-size: 1.3em;
    	border-radius: 7px;
    	-moz-transform:rotate(5deg);
    	-webkit-transform:rotate(5deg);
    	-o-transform:rotate(5deg);
    	-moz-transition: all 0.3s;
    	-o-transition: all 0.3s;
    	-webkit-transition: all 0.3s;
    	box-shadow: 2px 2px 3px black;
    }
    nav ul li a:hover {
    	color: black;
    	background: #EB9B33;
    	-moz-transform: rotate(0deg);
    	-webkit-transform: rotate(0deg);
    	-o-transform: rotate(0deg);
    }
    nav ul li:hover ul {
    	font-size: 1em;
    	display: block;
    	position: absolute;
    	left: 0;
    	z-index: 10000;
    }
    nav ul li:hover ul a {
    	font-size: 0.9em;
    	word-wrap: break-word;
    	display: block;
    	border-radius: 0;
    	box-shadow: none;
    }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Ahmed Sadman View Post
    I used Firefox 10.0.2
    That's quite old in technology terms. Use an up to date version, first off, as CSS3 is really fr the newest browsers.

    Post your HTML too, so that we can test this.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I will try newer versions. And here's the HTML:

    Code:
    <nav>
    	<ul>
    		<li><a href="index.html">Home</a></li>
    		<li><a href="portfolio.html">Portfolio</a></li>
    		<li><a href="service.html">Our Services&nbsp;&raquo;</a>
    			<ul>
    				<li><a href="sub_web.html">Web Design</a></li>
    				<li><a href="sub_graph.html">Graphics Design</a></li>
    				<li><a href="sub_quote.html">Quotes</a></li>
    			</ul>
    		</li>
    		<li><a href="about.html">About Us&nbsp;&raquo;</a>
    			<ul>
    				<li><a href="sub_team.html">Our Team</a></li>
    				<li><a href="sub_history.html">History</a></li>
    			</ul>
    		</li>
    		<li><a href="contact.html">Contact</a>
    	</ul>
    </nav>

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Ahmed Sadman View Post
    I will try newer versions.
    Hm, I just tried it in the latest Firefox and it is still jagged. Looks fine in Chrome. I guess they are still refining this stuff. (I also wonder how useful all these effects are. They don't make content any more accessible that it was, and most people just want to get to the information they need.)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •