5 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

http://www.csszengarden.com/215/

This link is from Css garden , i need to download this example and run it on my hard disk , how do i do that espically since there are pictures involved . i know its complex , but is there a way .

This website (csszengarden.com) provides examples like this . so i really would love to know how to download , so that i can hv it downloaded and Learn .

Thank you .

Gautam

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 4 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Yes it indeed is possible,

Yes it indeed is possible, but for this to work you need to give every div, image, frame, menu, URL's and more the same ID or class as stated in the CSS.

Also, indeed you need to add the same images, with the same names inside the correct folder.
I personally think it is easier to class and ID your own stuff, use your own images inside your own folders and use your OWN personal created CSS file.

Much easier and faster.

Check Maximum Webdesign for your online solutions

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

csszengarden

This was an important site a decade or so ago as an exposition of the benefits of separating structure from presentation. It was aimed, however, at the graphic designer and is a poor example of coding; not fit as a learning tool.

Its worthy lesson is that structured content comes first and decoration follows. Other than that, there is little for the developer to glean from the site.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thank you

Thank you gary for your inputs and yeah , that site is all about CSS , but still stands relevant as a good CSS 2
example till date . i think the link which i submitted here has a bit of CSS - 3 too in it though . i'am not sure .

And HellDog , i have never tried downloading a page ever , with images .. so step by step how do i do it ? and yeah , i don't mind using my own images and changing the class names , but just for simplicity sake , how do i download the images to ?

Thank you once again for ur advice .

Regards .

Gautam

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 4 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

If you want to download the

If you want to download the images I would right click an image and save it as...
Use the same name as being used in your css files and download it to the same folder as stated in your css.

A lot of the images inside this css file is not being used anymore, yet it is still inside the same CSS file.
For example:

aside:before {
  background: url('../images/starburst.png') center top no-repeat;
  background: url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOTIyLjU3NHB4IiBoZWlnaHQ9IjkyMS4wNzJweCIgdmlld0JveD0iMCAwIDkyMi41NzQgOTIxLjA3MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTIyLjU3NCA5MjEuMDcyIg0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNzQ1Ljk0NSw4MjkuMDQyIDUxNS4wNzIsNTc3LjIyMiA1NzIuNjM1LDkxMy45NzIgNDY0LjE0Niw1OTAuMDIgMzc5Ljc2Myw5MjEuMDcyIDQxMi40MjEsNTgwLjk5OSANCgkyMDAuNjgyLDg0OS4xMDggMzY4LjgzNSw1NTEuNzIxIDY2LjM1Miw3MTAuNTI2IDM0MC45MjgsNTA3LjIzOSAwLDUyOS4yOTEgMzMzLjUyLDQ1NS4yNTYgMTMuMTAxLDMzNi43MzEgMzQ3Ljg5Niw0MDQuNzU2IA0KCTEwMy4zOTMsMTY2LjE1MyAzODEuNTc2LDM2NC40NzEgMjU1LjI1Nyw0Ny4wNDUgNDI4LjcyNCwzNDEuMzY2IDQ0Mi40MzYsMCA0ODEuMTk3LDMzOS40MzUgNjMyLjU2NiwzMy4xNTcgNTI5LjkyLDM1OS4wMTIgDQoJNzkyLjc3NiwxNDAuNzgyIDU2Ni40NjgsMzk2LjcxNCA4OTUuMzU2LDMwNC4yNjQgNTg0LjUxNCw0NDYuMDIxIDkyMi41NzQsNDk1LjMzNiA1ODAuOTUxLDQ5OC40MDkgODY5LjcyNCw2ODAuOTY0IA0KCTU1Ni4zODgsNTQ0LjgxNSAiLz4NCjwvc3ZnPg0K') center top no-repeat;
  content: '';
  height: 921px;
  left: 50%;
  margin-left: -461.5px;
  position: fixed;
  top: 60px;
  width: 923px;

The first URL is not being active anymore, if you want you can even delete this whole URL code.
The second URL code is an SVG. If you want to use this you should create your own SVG and use that URL instead of the SVG stated on the website (else you are downloading files from other website).
And example of this SVG (in this case the big white star making rounds behind that blue-ish robot) is this link: Click here.

At first you don't see anything, but if you have Google Chrome or Firefox Mozilla you can check it's elements and will find this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="922.574px" height="921.072px" viewBox="0 0 922.574 921.072" enable-background="new 0 0 922.574 921.072" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<polygon fill="#FFFFFF" points="745.945,829.042 515.072,577.222 572.635,913.972 464.146,590.02 379.763,921.072 412.421,580.999   200.682,849.108 368.835,551.721 66.352,710.526 340.928,507.239 0,529.291 333.52,455.256 13.101,336.731 347.896,404.756   103.393,166.153 381.576,364.471 255.257,47.045 428.724,341.366 442.436,0 481.197,339.435 632.566,33.157 529.92,359.012   792.776,140.782 566.468,396.714 895.356,304.264 584.514,446.021 922.574,495.336 580.951,498.409 869.724,680.964   556.388,544.815 "/>
</svg>

As stated before, I think trying to re-create a website by using their CSS is a lot more work then creating your own.
You have to do a lot of research before realy going to place each puzzle on its spot.
By the way, the svg code mentioned above will create a star shape.

Hope this helps a bit.
Cheers, Henk.

Check Maximum Webdesign for your online solutions

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thank you helldog

Well 1st of all thank you for your extensive advice Smile I am going to try that for sure . your simply great Smile

kind regards .

Gautam.