Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Wysuwany panel boczny w CSS3
- <div id="panel">
- <div id="title">
- Panel
- </div>
- <div id="content">
- Jakaś zawartość
- </div>
- </div>
- #panel {
- position: fixed;
- top: 50px;
- right: -272px;
- z-index: 99999;
- transition: right 0.5s ease-out 0s;
- }
- #panel:hover {
- right: 0;
- }
- #panel #content {
- width: 250px;
- height: 300px;
- padding: 10px;
- border-top: 2px solid #C30011;
- border-right: none;
- border-bottom: 2px solid #C30011;
- border-left: 2px solid #C30011;
- z-index: 20;
- background: #FFFFFF;
- position: relative;
- border-radius: 10px 0 0 10px;
- }
- #panel #title {
- width: 150px;
- border: 2px solid #C30011;
- background: #E61B2D;
- color: #FFFFFF;
- font-weight: bold;
- border-radius: 10px;
- padding: 5px 5px 25px 5px;
- text-align: center;
- position: relative;
- top: 140px;
- left: -90px;
- transform: rotate(-90deg);
- z-index: 1;
- }
- Trzeba zwrócić uwagę na użyte przeze mnie własności transition, border-radius i transform. Aby zapewnić kompatybilność naszego panelu ze wszystkim przeglądarkami, może okazać się niezbędne dodanie do nich przedrostków takich jak -moz- czy -webkit-.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement