Skip to content

Instantly share code, notes, and snippets.

@hawkrives
Created March 26, 2012 16:10
Show Gist options
  • Save hawkrives/2206200 to your computer and use it in GitHub Desktop.
Save hawkrives/2206200 to your computer and use it in GitHub Desktop.
/**
* Remix of http://dream-world.us/2011/11/30/the-best-pure-css3-ios-style-arrow-back-button/
*/
body { background: rgb(109,131,161); }
#ios-arrow-left {
display : block;
position:absolute;
z-index : 0;
left:50px;
top:50px;
height:30px;
width:auto;
padding: 0 10px 0 6px;
background-repeat:repeat-x;
background-size : 30px;
background-position :0;
background-image : linear-gradient( bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.3) 100% );
border-radius: 5px;
border-bottom: 1px solid rgba(255,255,255,0.4);
box-shadow :0 -1px 1px rgba(0,0,0,0.2)inset, 0 1px 2px rgba(0,0,0,0.8)inset;
font-family : HelveticaNeue;
font-weight: 400;
font-size : 12px;
line-height : 30px;
text-align:center;
color:#fff;
text-shadow : 0px -1px 0px rgba(0,0,0,0.8);
}
#ios-arrow-left:before{
position:absolute;
content : ' ';
left:-8px;
top:3.5px;
height : 24px;
width: 24px;
z-index : 1;
background-repeat:repeat-x;
background-size : 20px 20px;
background-position :-1px -0.5px;
background-image : linear-gradient(45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.3) 100%);
transform : rotate(-45deg) skew(-10deg, -10deg);
border-top-right-radius : 10px;
border-top-left-radius :0px;
border-bottom-right-radius : 0px;
border-bottom-left-radius : 10px;
border-left : 1.5px solid rgba(255,255,255,0.4);
box-shadow : 1px 1px 1px rgba(0,0,0,0.4) inset, -1px 1px 1px rgba(0,0,0,0.5) inset;
mask-image : linear-gradient(-45deg, #000000 0%, #000000 40%, transparent 50%, transparent 100%;
transition: .5s all;
}
#ios-arrow-left, #ios-arrow-left:before {
background-color: rgba(74,108,155,1);/*hovercolor*/
}
#ios-arrow-left:hover, #ios-arrow-left:hover:before {
background-color: rgba(54,88,135,1);/*hovercolor*/
}
<!-- content to be placed inside <body>…</body> -->
<div id="ios-arrow-left">Albums</div>
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
@antonohuan
Copy link

I want to share my experience in https://glory-casino.shop/! The site is stylish and modern, which makes playing even more enjoyable. The bonus program is really impressive - I regularly receive offers that profitably increase my bankroll. The speed of processing withdrawal requests is very pleasing. If you are looking for a quality and reliable online casino, be sure to try Glory Casino!

@Bog2544
Copy link

Bog2544 commented Dec 8, 2024

Výborný zákaznický servis mě opravdu potěšil. Když jsem měla otázku ohledně mostbet-czk.bet, tým podpory mi okamžitě odpověděl a pomohl vyřešit můj problém. Oceňuji rychlost a profesionalitu, se kterou byly mé dotazy zodpovězeny. Je skvělé vědět, že mohu spoléhat na pomoc v českém jazyce kdykoli budu potřebovat.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment