Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:iconbradleysays: More from bradleysays


More from deviantART



Details

Submitted on
December 3, 2012
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
15,098 (5 today)
Favourites
93 (who?)
Comments
51
×

CSS Did You Know? - December 4th, 2012

Journal Entry: Mon Dec 3, 2012, 7:40 PM
:iconneurotype:
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.

:iconmiontre:
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!


Shadows


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 x-offest and y-offset affect the offset of the shadow along the x and y axes respectively (remember x is horizontal, and y is vertical). The softness allows you to control how blurred the shadow is. And of course, colour 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 x-offset, y-offset, softness, and colour affect the shadow in the same way as they do for the text-shadow property. However, the size attribute allows you to add extra size to the shadow. On the other hand; inset 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;



Rounded Edges


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

Or, alternatively

border-radius: radius radius radius radius

Just replace 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.


Gradients


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!


Shapes


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:

border-radius: 50%;

Next, simply define your width and height and you'll have a circle or oval!

Triangles
Creating triangles is already explained well over at CSS-Tricks!

Other Shapes
Using a bit of imagination, you can also create other shapes.. see if you can make a star!

:iconbradleysays:
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! :)

:iconexcitedlaplz:
Previous editions

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 :pointr: here!




CSS Did You Know? is an article series that gives you tips and lessons on CSS. This edition includes a reminder that CSS is copyright and replacing images with CSS.
Add a Comment:
 
:iconpizzapotatonbacon:
PizzaPotatoNBacon Feb 23, 2013  Student General Artist
I'm just curious here:
While we're not allowed to re-use CSS codes without permission, can we study them and try to build codes from scratch? Some tutorials are pretty hard to understand. Also, viewing CSS in plain view is helpful (for me).
While I'm a minor (not under aged to be on dA, of course), I don't think the law would spare me at all, and I want a complete understanding of what's okay and what's not. I love to play around with coding and see what it can do, because I love it.

For example, I saw this neat journal, but I wanted to try adding some flair to it. What do I have to do in order to use the code properly? Just ask permission, and credit if the author allows me to do so? Or is it much, much more complicated than that?
Reply
:iconthe-lantiis:
The-Lantiis Dec 7, 2012   Photographer
A great bit of information! Many people don't realize that coding is just as much an art form taking as much work as any other.
Reply
:iconmiontre:
miontre Dec 19, 2012  Hobbyist Photographer
I agree! :nod:
Reply
:iconxquatrox:
xQUATROx Dec 5, 2012  Professional Digital Artist
"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"
This bit sounds kind of retarded (if I may say so). It basically states that one cannot use the code in the tutorial, because that would be 'copying' and 'disrespectful'. I do have to say, that this is exactly how people learn, it is impossible to read 50 tutorials, memorize everything and then write your code without looking at anything. It's how the world works, wake up you greedy bastards!
Reply
:iconthe-lantiis:
The-Lantiis Dec 7, 2012   Photographer
I understand what you are saying, but a tutorial is a resource for learning, not a resource for sharing a completed work (unless it says it is okay). In the same way that people use CSS tutorials to learn by copy/paste, some artists learn by tracing. Tracing is still not okay unless the artist of the original work states it is okay just like copying someone's code is not okay. They are, effectively, the same things.

The bottom line is that if it is a derivative work and the copyright holder has not stated derivative works are okay, then it is illegal. Please also note that deviantART does not recognize Fair Use simply because it is a very gray legal area that can get everyone in trouble. However, because you are using a work to learn, you CAN do so. You just cannot post it publicly when you are done without the permission of the copyright holder.

I would be more than happy to answer any questions you have or direct you to some groups with more information. I am not a lawyer, but I have spent an extensive amount of time researching this topic in an effort to not break the law myself (and to be able to make acceptable reports here on deviantART).
Reply
:iconneurotype:
neurotype Dec 5, 2012  Hobbyist General Artist
This isn't referring to tutorials at all.

You can say what you like, but please verify your information first. ;)
Reply
:iconxquatrox:
xQUATROx Dec 6, 2012  Professional Digital Artist
That sentence came right after a learning resource page <--- My verification
Reply
:iconneurotype:
neurotype Dec 6, 2012  Hobbyist General Artist
Although this should help. I'm quoting what's up there.

"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."
Reply
:iconneurotype:
neurotype Dec 6, 2012  Hobbyist General Artist
Sorry, I don't understand what you're saying here. Could you please rephrase?
Reply
:iconletrainfalldown:
letrainfalldown Dec 5, 2012  Student General Artist
I just wanted to say...
I actually learned to code by taking free-use code (the code from a layout generator) and changing every single part of that code until I figured out what did what. Now, 5-ish years later, I understand HTML/CSS fairly well.

Before I did that, I've tried tutorials and I just found them really dry and really difficult to remember. Trial and error taught me 3 million times more and faster than tutorials did.

However, because of this and because I've seen a lot of apparent "coding theft", what I wanted to say is...
There's only so many ways to code something. CSS has a limited vocabulary. It's not fully like English, where you have synonyms for things. No, CSS doesn't really have that. So what I've noticed is that when people cry "coding theft!" it's more because you copied their style, not because you copied their actual coding - am I right? Because I code extensively on other sites and that's how I feel. I don't care if you copy the fact that I put position, then height, then width, then border-radius, then box-shadow, whatever, in that order like I did in my coding. No, I care that you also made the box shadow 3 px big in the same direction and that you used a gradient on your scrollbar in exactly the same pattern with the exact same pixel width and that you also made the links have text-shadow.

Right?
Reply
Add a Comment: