Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Źrenice nie chcą być na swoich miejscach
Forum PHP.pl > Forum > Przedszkole
Teppic
3.04.2012, 19:36:36
Chodzi po prostu o to, że chcę stworzyć "ludzika" używając tylko css3. Już przy tworzeniu głowy napotkałem taki problem, że źrenice, czyli "<p>" przetrzymujące literkę "o" nie chce wylądować w "divie" o nazwie "eye", tylko ląduje pod nim. Domyslam się, że coś z "positionami: jest tu nie tak u mnie. Proszę o pomoc.

Oto kod:

[PHP] pobierz, plaintext 
  1. body{
  2. margin:0 auto;
  3. text-align:center;
  4. padding:0;
  5. }
  6.  
  7. #outer{   /*box with head and eyes */
  8. overflow:hidden;
  9. width: 102px;
  10. margin:0 auto;
  11. border: 1px black solid;
  12. }
  13.  
  14. #head{  /*  head */
  15. position:relative;
  16. -moz-border-radius: 220px;
  17. -webkit-border-radius: 220px;
  18. -o-border-radius: 220px;
  19. width: 100px;
  20. height: 100px;
  21. background: yellow;
  22. }
  23.  
  24. .eye{ /*  eye */
  25. position:absolute;
  26. -moz-border-radius: 10px;
  27. -webkit-border-radius: 10px;
  28. -o-border-radius: 10px;
  29. width: 20px;
  30. height: 16px;
  31. background: white;
  32. border: 1px black solid;
  33. text-align:center;
  34. }
  35.  
  36. #left{ /*  positioning left eye */
  37. margin: 22px 0 0 15px;
  38. }
  39.  
  40. #right{ /*  positioning right eye */
  41. margin: 22px 15px 0 60px;
  42. }
  43.  
  44. .appleoftheeye{ /*  to jest źrenica, w tym wypadku literka "o" */
  45. font-size:15px;
  46. font-weight:bold;
  47. }
  48.  
  49. #mouth{ /* usta */
  50. position:absolute;
  51. -moz-border-radius: 0 0 69px 69px;
  52. width: 66px;
  53. height: 22px;
  54. background: white;
  55. border: 1px black solid;
  56. margin: 66px 0 0 15px;
  57. }
  58.  
[PHP] pobierz, plaintext


A to kod html:

[PHP] pobierz, plaintext 
  1. <body>
  2.  
  3. <div id="outer">
  4.  
  5.  
  6. <div id="head">
  7.  
  8. <div class="eye" id="left"> <p class="appleoftheeye">o</p> </div> 
  9. <div class="eye" id="right"> <p class="appleoftheeye">o</p> </div>
  10.  
  11. <div id="mouth"></div>
  12.  
  13.  
  14. </div>
  15.  
  16.  
  17.  
  18.  
  19. </div>
  20.  
  21.  
  22.  
  23. </body>
[PHP] pobierz, plaintext


Jeszcze pytanie: Czy można napisać tą glowę bardziej prostym kodem? Np. za pomocą "relative" i "z-index"? Czy mój sposób jest najprostszy?
Kshyhoo
3.04.2012, 19:49:41
Zobacz to:
[HTML] pobierz, plaintext 
  1. <div class="smileyface">
  2.     <p class="eyes lefteye"></p>
  3.     <p class="eyes righteye"></p>
  4.     <div class="smile">
  5.         <div class="corner"></div>
  6.         <div class="corner right"></div>
  7.     </div>
  8. </div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. div.smileyface {
  2. 	width: 300px;
  3. 	height: 300px;
  4. 	position: relative;
  5. 	border-radius: 150px;
  6. 	-webkit-border-radius: 150px;
  7. 	-moz-border-radius: 150px;
  8. 	display: block;
  9. 	background: #ffe632;
  10. 	background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
  11. 	background: -moz-linear-gradient(top,  #fffe8d,  #f6d23e);	
  12. 	box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
  13. 	-webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
  14. 	-moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
  15. 	}
  16.  
  17. p.eyes {
  18. 	width: 50px;
  19. 	height: 80px;
  20. 	background: #222;
  21. 	border-radius: 100px/160px;
  22. 	-webkit-border-radius: 100px 160px;
  23. 	-moz-border-radius: 100px/160px;
  24. 	position: absolute;
  25. 	top: 40px;
  26. 	box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
  27. 	-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
  28. 	-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
  29. }	
  30.  
  31. p.eyes.lefteye {
  32. 	left: 75px;
  33. }
  34.  
  35. p.eyes.righteye {
  36. 	right: 75px;
  37. }
  38.  
  39. div.smile {
  40. 	width: 200px;
  41. 	height: 70px;
  42. 	border: 10px solid #222;
  43. 	border-top: 0;
  44. 	background: rgba(0,0,0,0);
  45. 	-moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
  46. 	-webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
  47. 	border-radius: 0 0 120px 120px / 0 0 90px 90px;
  48. 	position: absolute;
  49. 	bottom: 50px;
  50. 	left: 38px;
  51. 	box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
  52. 	-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
  53. 	-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
  54. }
  55.  
  56. div.corner {
  57. 	width: 10px;
  58. 	height: 30px;
  59. 	background: #222;
  60. 	border-radius: 100px/160px;
  61. 	-webkit-border-radius: 100px 160px;
  62. 	-moz-border-radius: 100px/160px;
  63. 	position: absolute;
  64. 	top: -12px;
  65. 	-webkit-transform: rotate(65deg);
  66. 	-moz-transform: rotate(65deg);
  67. 	left: -12px;
  68. }
  69.  
  70. div.corner.right {
  71. 	left: 202px;
  72. 	-webkit-transform: rotate(-65deg);
  73. 	-moz-transform: rotate(-65deg);		
  74. }
[CSS] pobierz, plaintext
Niktoś
3.04.2012, 19:50:00
Ja bym zdecydowanie do tego użył pozycjonowania absolute i pobawił się z-indexami.
Teppic
3.04.2012, 20:04:17
Dzieki Kshyhoo ale jeszcze w swojej nauce nie doszedłem do transformacji;P. Jak się poduczę to oczywiscie sprobuję tego ciekawego zjawiska.

Co do mojego problemu to n niejako wymusiłem wlasciwe pozycje "<p>" nadając mu parametr "padding" na 0 i "margin": na -3px. Ale dziwię się dlaczego nie ustawiły mi się w centrum diva... przecież dalem mu parametr "text-align: center";/.

Z-indexami się pobawię, na pewno;P A czy nie jest tak, że "z-index" nadaje się tylko boxom o position "relative"?

Edit: Kolejny problem, nie działa mi "overflow: hidden" w Chrome:


[PHP] pobierz, plaintext 
  1. /*  box trzymający buzię z językiem */
  2. div.kontener{
  3. position:absolute;
  4. width:66px;
  5. border:0;
  6. padding:0;
  7. margin: 66px 0 0 15px;
  8. }
  9.  
  10. /*  definiujemy język */
  11. .tongue{
  12. position:relative;
  13. display:block;
  14. overflow:hidden;
  15. -moz-border-radius: 0 0 69px 69px;
  16. -webkit-border-radius: 0 0 69px 69px;
  17. -o-border-radius: 0 0 69px 69px;
  18. width: 66px;
  19. height: 22px;
  20. background: white;
  21. border: 1px black solid;
  22. }
  23.  
  24.  
  25. .dot{ /*  okrąg tworzący jedną stronę języka */
  26. position:absolute;
  27. background:red;
  28. width:36px;
  29. height:36px;
  30. -moz-border-radius: 99px;
  31. -webkit-border-radius: 99px;
  32. -o-border-radius: 99px;
  33. -moz-box-shadow: 2px -2px 5px #888888;
  34. -webkit-box-shadow: 2px -2px 5px #888888;
  35. -o-box-shadow: 2px -2px 5px #888888;
  36. }
  37.  
  38. #ldot{
  39. left: 3px;
  40. top: 5px;
  41. margin:0;
  42. }
  43.  
  44. #rdot{
  45. right: 6px;
  46. top: 5px;
  47. margin:0;
  48. }
[PHP] pobierz, plaintext


Chodzi o to by kontener "tongue" zakrywal doly dwóch tych divów "dot" tak by te nachodząc na siebie tworzyly języczek;P. Firefox wszystko ladnie wyswietla natomiast Chrome nie!
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.