1 / 14

CSS 3.0 Training in Marathahalli BTM Bangalore

Gyanguide Bangalore Center is one of the best CSS3.0 training institutes in Bangalore with 100% placement support. CSS3 training in Bangalore provided by CSS3 certified experts and real-time working professionals with 14 years of experience in real time CSS projects. Book you’re free of demo classes 1 week.<br>Contact: 9036002622<br>

SiyaramRay
Download Presentation

CSS 3.0 Training in Marathahalli BTM Bangalore

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WEL COME TO GYANGUIDE

  2. Talk Outline  Create Rounded Corners 2. Drop Shadow 3. Create Gradient Buttons 4. Multi-Column Layout 6. Transform Transition 5. Multiple background images

  3. Create Rounded Corners border -*-*-radius: [x] [y]? x = horizontal radius [ <length> | <%> ] y = vertical radius [ <length> | <%> ] border-top-left radius: x y; border-top-right-radius: x y;

  4. Create Rounded Corners • Safari and Chrome: – V3.0: use –web kit- prefix

  5. Drop Shadow text-shadow: x y b color • x = horizontal offset  x < 0: left of the text  x > 0: right of the text • y = vertical offset  y < 0: above the text  y > 0: below the text • b = blur radius

  6. Drop Shadow box-shadow: x y b color Examples: -web kit-box-shadow: -3px 3px3px#999999; -moz-box-shadow: -3px 3px3px #999999; text-shadow: -4px 4px 3px #999999;

  7. Seating Chart with CSS3

  8. Create Gradient Buttons • rgba(r, g, b, opacity) • background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(255,255,255,1)),to(rgba(185,185,185,1))); • background:-moz-linear-gradient(top,rgba(255,255,255,1), rgba(185,185,185,1));

  9. Multiple background images background: <image> <position> <size> <repeat> <attachment> <box>, <image> <position> <size> <repeat> <attachment> <box>, <image> <position> <size> <repeat> <attachment> <box>, <image> <position> <size> <repeat> <attachment> <box> <color>; OR background- image: <image>, <image>, <image>, <image>; background-repeat: <repeat>, <repeat>, <repeat>,<repeat>; background-position: <position>, <position>, <position>,<position>; /* plus any background attachment and/or box properties as needed 

  10. Multi-Column Layout #multi-column { /* For Mozilla: */ -moz-column-width: 13em; -moz-column-gap: 1em; /* For Web Kit: */ -web kit-column-width: 13em; -web kit-column-gap: 1em; }

  11. Multi-Column Layout #multi-column { -moz-column-count: 3; -moz-column-gap: 1em; -moz-column-rule: 1px solid black; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-rule: 1px solid black; }

  12. Contact details 23/37,1st Floor, MaruthiNilayaHemanth Nagar, Marathahalli Bangalore 560037. 

  13. Thank you

More Related