vartotojas slaptažodis


   
registracija slaptažodžio priminimas  
naujienos | forumas | paieška | taisyklės | kontaktai

Šiuo metu prisijungę vartotojai: Sekretore, ir 1 svečiai Iš viso narių: 6,053 Naujausias narys: DeividasJ


Peržiūrėti temą Forumas :: Programuotojų kampelis :: CSS :: CSS pagrindai
Geometrinės figūros ir CSS
Autorius: zwimba Data: 2013.02.06 07:40



zwimba Įstojo: 2012.05.03
Pranešimai: 734
Reputacija: [+29]
Lankėsi: 2013.07.06
Laimėta: 1
Pralaimėta: 0
  #1 parašyta 2013.02.06 07:40
Redaguotas 2013.02.16 21:41
Įspėjimai: [3/5]
AK Reitingas ->(20.3)
06
Vasario
2013
Cia pateiksiu pora pavyzdziu... kaip CSS pagalba galima padaryti geometrines figuras. Beabejo kvadrata, staciakampi dauguma moka. Bet ar mokate padaryti Sirdi, zvaigzde ir t.t.?

Placiau ir daugiau galimybiu suzinosite apsilanke mano bloge http://zwimba.eu/...ros-ir-css

Pirmas butu Ovalas:
Atsisiųsti kodą  GeSHi: CSS
  1. #ovalas {
  2. width: 100px;
  3. height: 100px;
  4. background: red;
  5. -moz-border-radius: 50px;
  6. -webkit-border-radius: 50px;
  7. border-radius: 50px;
  8. }
ecolor.lt nuspalvino per 0.003 sekundes, naudojant spalvotas kreideles.


O cia Sirdis:
Atsisiųsti kodą  GeSHi: CSS
  1. #sirdis {
  2. position: relative;
  3. width: 100px;
  4. height: 90px;
  5. }
  6. #sirdis:before,
  7. #sirdis:after {
  8. position: absolute;
  9. content: "";
  10. left: 50px;
  11. top: 0;
  12. width: 50px;
  13. height: 80px;
  14. background: red;
  15. -moz-border-radius: 50px 50px 0 0;
  16. border-radius: 50px 50px 0 0;
  17. -webkit-transform: rotate(-45deg);
  18. -moz-transform: rotate(-45deg);
  19. -ms-transform: rotate(-45deg);
  20. -o-transform: rotate(-45deg);
  21. transform: rotate(-45deg);
  22. -webkit-transform-origin: 0 100%;
  23. -moz-transform-origin: 0 100%;
  24. -ms-transform-origin: 0 100%;
  25. -o-transform-origin: 0 100%;
  26. transform-origin: 0 100%;
  27. }
  28. #sirdis:after {
  29. left: 0;
  30. -webkit-transform: rotate(45deg);
  31. -moz-transform: rotate(45deg);
  32. -ms-transform: rotate(45deg);
  33. -o-transform: rotate(45deg);
  34. transform: rotate(45deg);
  35. -webkit-transform-origin: 100% 100%;
  36. -moz-transform-origin: 100% 100%;
  37. -ms-transform-origin: 100% 100%;
  38. -o-transform-origin: 100% 100%;
  39. transform-origin :100% 100%;
  40. }
ecolor.lt nuspalvino per 0.012 sekundes, naudojant spalvotas kreideles.



Na ir pabaigai In-Jan:
Atsisiųsti kodą  GeSHi: CSS
  1. #yin-yang {
  2. width: 96px;
  3. height: 48px;
  4. background: #eee;
  5. border-color: red;
  6. border-style: solid;
  7. border-width: 2px 2px 50px 2px;
  8. border-radius: 100%;
  9. position: relative;
  10. }
  11.  
  12. #yin-yang:before {
  13. content: "";
  14. position: absolute;
  15. top: 50%;
  16. left: 0;
  17. background: #eee;
  18. border: 18px solid red;
  19. border-radius: 100%;
  20. width: 12px;
  21. height: 12px;
  22. }
  23.  
  24. #yin-yang:after {
  25. content: "";
  26. position: absolute;
  27. top: 50%;
  28. left: 50%;
  29. background: red;
  30. border: 18px solid #eee;
  31. border-radius:100%;
  32. width: 12px;
  33. height: 12px;
  34. }
ecolor.lt nuspalvino per 0.009 sekundes, naudojant spalvotas kreideles.



Placiau ir daugiau galimybiu suzinosite apsilanke mano bloge http://zwimba.eu/...ros-ir-css




Sticius Įstojo: 2013.01.06
Pranešimai: 243
Reputacija: [+19]
Lankėsi: 2014.03.12
Laimėta: 2
Pralaimėta: 2
  #2 parašyta 2013.02.16 20:44

Įspėjimai: [0/5]
AK Reitingas ->(8.06)
16
Vasario
2013
Aciu, kad padedi :)




DieseL Įstojo: 2011.07.30
Pranešimai: 1084
Reputacija: [+113]
Lankėsi: 2014.07.28
Laimėta: 4
Pralaimėta: 1
  #3 parašyta 2013.02.21 00:43

Įspėjimai: [1/5]
AK Reitingas ->(26.47)
21
Vasario
2013
Tikrai pravers,dėkui. Dar su tais border sunkiai įkertu, tai bus kaip pavyzdys jeigu kamnors prireiks .



Peršokti į forumą:

Pastebejo tema
Deiviokas(1), viprts(1),
Skliaustuose rodoma kiek kartų vartotojas pastebėjo tema.

Meniu
Sprendimas
Draugai
   
naujienos
forumas
paieška
taisyklės
kontaktai
webdizainas: ignart0
įgyvendinimas: viprts
lfs.us.lt
cybercs.tt.lt
rank.our.lt
ip.zones.lt
Top Web Rank - Tinklalapiu Topas
Copyright (c) 2011 - 2019
All right reserved.