CSS is copyright, too
If you see a design that you like, save it to your hard drive, and then
replace all the content with your own, you are violating copyright. This is true even if you change the IDs and class names to make it look like your own work. If you didn't spend the time to create the HTML and CSS yourself, then you may be violating copyright.
--quoted from this article by Jennifer Kyrnin.
Without a Creative Commons license, using someone else's code to build your own skin and then sharing it—even if you made the images yourself—is a violation of site policy
and even persecutable under copyright law. In the case of web design, copying someone's overall design and color schemes can also be grounds for a complaint.
Unless you have permission or you are using a resource posted for free use, the bottom line is you should always do your own coding.
Since dA site policy adds some modifiers to skin use, let's take a look at the terms. You see these in full when you hit the edit button on a skin and can't edit the skin without accepting them, but I've just chosen the most important pieces to share here. There is also a version that skin creators have to agree with before uploading a skin permitting people to make changes to their original design for personal use.
By accessing content contained in the deviantART Skins category ("Skin Content") you agree as follows:
You may use the Skin Content only on your user pages or on other pages and applications on deviantART designed to accept Skin Content ("Pages") and not otherwise.
You agree that the author responsible for the Skin Content will be credited by deviantART when you use the Skin Content.
You may modify the Skin Content as and when you use the Skin Content in accordance with this Agreement, but not otherwise. You may not represent the Skin Content, even as modified, as your own work without crediting the original author.
You may not grant permission to any other person to use the Skin Content, even as modified.
A person's code is their intellectual property. If you are inspired by their work to make your own skins, there are a ton of good tutorials that will teach you how to code from the ground up (a good starting point for these is eCSSited
). But simply looking at their code and copying it—typing it out in Notepad instead of hitting copy-paste is still copying—is both a violation of copyright/site policy and incredibly disrespectful of the time they spent making a great resource for your use.
Replacing Images with CSS
Traditionally, web designers have used images to create more visually interesting designs. However, recent developments in CSS3 allows us to completely code what would have required an image beforehand. Images can be replaced in many instances with new features, some of which are available for use right here on deviantART. Let's begin!
You can very easily create a shadow on either some text or an element using a single line of CSS. Let's explore both.
text-shadow: x-offset y-offset softness colour
The above line will allow you to create a shadow on some text. The
affect the offset of the shadow along the x and y axes respectively (remember x is horizontal, and y is vertical). The
allows you to control how blurred the shadow is. And of course,
lets you pick a colour for your shadow.
box-shadow: x-offset y-offset softness size colour inset
The above line will put a shadow on an element. The
affect the shadow in the same way as they do for the
property. However, the
attribute allows you to add extra size to the shadow. On the other hand;
is an option, not a value which you set. You can use this to make the shadow cast inside your element, instead of outside it.
Here's a practical example of both properties:
text-shadow: 0px 1px 0px grey;
box-shadow: 2px 1px 3px 1px black;
Using CSS3, you can now very easily create rounded edged elements. Once again, only a single line of code is required to do this.
border-radius: radius radius radius radius
with either a pixel or percentage value, to control how "rounded" your edges are. In the second example, you can pick a different value for each corner.
CSS3 allows us to generate gradients using pure CSS. This has already been explained excellently in a previous editing of CSS Did You Know by jonarific
, which you can find here
Here is where the real fun begins. You can create basic shapes using pure CSS! There is no need to create an image to use certain basic shapes.Cirlces and Ovals
You can create a circle or oval by bumping the border-radius to the maximum. Adding this line of code to any CSS property will make it take the shape of a circle or oval:
Next, simply define your
and you'll have a circle or oval!Triangles
Creating triangles is already explained well over at CSS-Tricks
Using a bit of imagination, you can also create other shapes.. see if you can make a star!
What would you like to know?
CSS will be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note bradleysays
If you write a section for us, you will be credited!
Want to learn more about CSS and how to use it? We've collated all of our previous articles and put them into one document for your convenience.
Read the CSS Did You Know? archive here