Shop Mobile More Submit  Join Login

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 Featured By Owner 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
:iconilantiis:
iLantiis Featured By Owner Dec 7, 2012  Hobbyist Digital Artist
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 Featured By Owner Dec 19, 2012  Hobbyist Photographer
I agree! :nod:
Reply
:iconxquatrox:
xQUATROx Featured By Owner 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
:iconilantiis:
iLantiis Featured By Owner Dec 7, 2012  Hobbyist Digital Artist
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 Featured By Owner 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 Featured By Owner Dec 6, 2012  Professional Digital Artist
That sentence came right after a learning resource page <--- My verification
Reply
:iconneurotype:
neurotype Featured By Owner 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 Featured By Owner Dec 6, 2012  Hobbyist General Artist
Sorry, I don't understand what you're saying here. Could you please rephrase?
Reply
:iconletrainfalldown:
letrainfalldown Featured By Owner 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
:iconneurotype:
neurotype Featured By Owner Dec 5, 2012  Hobbyist General Artist
That's how I learned to code, I hate tutorials. (Also, tragically, letting Dreamweaver build sites for me.)

Yeah, there's a lot of dependency on how the person is going about the process. It's even possible to come up with two similar website designs independently, though of course the colors and padding matching up = time to get suspicious. I think you can get ideas from looking at what someone else has done without ripping their whole process, but that involves not only using them as a reference.
Reply
:iconelectricjonny:
electricjonny Featured By Owner Dec 4, 2012  Hobbyist Photographer
Wait, you can use inset on text-shadow? :slow: Is that a standard value? It doesn't seem to work in Firefox, at least not in Firebug/Stylish.
Reply
:iconmiontre:
miontre Featured By Owner Dec 4, 2012  Hobbyist Photographer
Not to my knowledge :slow:

In the article, I wrote: "text-shadow: x-offset y-offset softness colour" and a few lines down "box-shadow: x-offset y-offset softness size colour inset" nothing about inset on the text shadow :P
Reply
:iconelectricjonny:
electricjonny Featured By Owner Dec 4, 2012  Hobbyist Photographer
Oh right :slow: My bad; read it too quickly.
Reply
:iconmiontre:
miontre Featured By Owner Dec 4, 2012  Hobbyist Photographer
Haha :giggle:
Although a inset feature for text would be amazing!
Reply
:icongillianivy:
GillianIvy Featured By Owner Dec 26, 2012  Hobbyist General Artist
:icontroofsplz: I had tried it once just hopefully.
Reply
:iconelectricjonny:
electricjonny Featured By Owner Dec 4, 2012  Hobbyist Photographer
Yeah it would :nod:
Reply
:iconjamseye:
JAMsEye Featured By Owner Dec 4, 2012  Hobbyist General Artist
Sometimes I wonder if this typical copyright brainwash is worth reacting, trying to provide a bit of common sense in an ocean of misleading declarations...
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.

is just plain, utter nonsense. It doesn't violate any copyright for as long as it remains on your hard drive for your own, personal use! (Shall all the faithful, sincere, honest novice-web-designers feel guilty for trying to understand on their own how technologies work?)

Now the irony is you are infringing Copyright laws if you quoted this text without the author's consent... Funny, huh? :rofl:
Reply
:iconneurotype:
neurotype Featured By Owner Dec 4, 2012  Hobbyist General Artist
How is directly working off someone else's code not plagiarism? Obviously if it doesn't go anywhere but your hard drive no one will find out, but reusing chunks of it or creating a very similar design are violations.

"Examples of fair use include commentary, search engines, criticism, news reporting, research, teaching, library archiving and scholarship. It provides for the legal, unlicensed citation or incorporation of copyrighted material in another author's work under a four-factor balancing test."
Reply
:iconjamseye:
JAMsEye Featured By Owner Dec 5, 2012  Hobbyist General Artist
It looks like you're fairly convinced. I'll just add that not every single body "working off somebody else's code" is animated with intentions to ruin others. Have you ever heard about Open Source and Free (as in Speech) software, for instance?

Look, there are really two ways of viewing the situation: either you're flattered someone uses your code or you're feeling robbed. Call it inspiration or theft, it's up to you. Clearly the second option is advertised by countless articles and organizations so as to be the default in people's mind. I'm just tired to see more and more of such extreme low-level reasoning.

Copyright has opened Pandora's box. Let's see what happens in the end. I'm really not sure there won't be any regret at all...
Reply
:iconneurotype:
neurotype Featured By Owner Dec 5, 2012  Hobbyist General Artist
I'm not a fan of people cutting down other people's livelihoods. I like the idea of open source and all, but let's face it, no one online donates enough to fund someone's life that way unless the site is ridiculously massive. (Maybe.) If it's not open source or Creative Commons, that should be respected. And from my experience people are happy to help others if they're asked first, so maybe that'll offer an alternative to full blown open source.

If Linux's model proves more feasible down the line, I'll happily eat my words.
Reply
:iconjamseye:
JAMsEye Featured By Owner Dec 6, 2012  Hobbyist General Artist
I understand what you mean, quite in fact. My own belief is that such a model where we share knowledge is quite viable. Fact is the frantic material way of life in industrialized civilizations in the long term tends to make Humans focus more on profitability and their own little person than mutual help. This leads to a largely adopted behaviour of distrusting our peers. It's just one form of sustained, contagious paranoia. Just that this time it doesn't pass for a disease...
Reply
:iconneurotype:
neurotype Featured By Owner Dec 6, 2012  Hobbyist General Artist
Viable how, though? Sharing information doesn't fulfil basic needs. I've heard nothing inspiring about the outcome of letting people pay as much as they think something's worth (cf. Radiohead).

On the other hand, a barter economy would kick ass.
Reply
:iconjamseye:
JAMsEye Featured By Owner Dec 7, 2012  Hobbyist General Artist
There isn't one and only one way to fulfil basic needs. And again, there *can* be an economy. But putting it *above* anything else won't save mankind.
Reply
:iconneurotype:
neurotype Featured By Owner Dec 7, 2012  Hobbyist General Artist
We need to learn to trust each other. D:
Reply
(2 Replies)
:iconneurotype:
neurotype Featured By Owner Dec 4, 2012  Hobbyist General Artist
uncited source: Wikipedia's article on fair use :B
Reply
:iconpricechi:
pricechi Featured By Owner Dec 4, 2012
It seems that I'm potentially violating copyright! (Though I've never shared any Skins I've modified, and 80% or more of the code is different if it matters.) I understand the basics of CSS from w3schools' tutorials but never really bothered to figure out the structure of it. dA CSS is especially foreign... and I couldn't find any appealing skin and started modifying them to my heart's content.
I better start reading up on it! ; x ;

But I used to do what was mentioned above when I was 12. I simply modified the images and fonts in blogger skins and put them on the website (blogskins, was it?) for others to use. (Infringing the copyrights of both the code and the images!)

Thanks for the heads up! =)
Reply
:icongasara:
Gasara Featured By Owner Dec 4, 2012
Thanks for another great article. :love:
Reply
:iconrequiemachina:
Requiemachina Featured By Owner Dec 4, 2012
Interesting!
Reply
:iconneurotype:
neurotype Featured By Owner Dec 4, 2012  Hobbyist General Artist
Depressingly relevant: [link] :ohnoes:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Dec 4, 2012
:#1:
Reply
:iconsingingflames:
SingingFlames Featured By Owner Dec 4, 2012  Hobbyist Writer
Very cool segment! Thank you! :la:
Reply
:iconpiratelotus-stock:
PirateLotus-Stock Featured By Owner Dec 4, 2012
:heart: ILU
Reply
:iconbradleysays:
bradleysays Featured By Owner Dec 4, 2012
:giggle: :love:
Reply
:iconsirocco-rc:
sirocco-rc Featured By Owner Dec 4, 2012  Hobbyist Digital Artist
Thank you for sharing this. Your articles are always interesting.
Reply
:iconelandria:
Elandria Featured By Owner Dec 4, 2012  Professional General Artist
Triangling all the things! :D

Wish more people would learn about copyright on code and text etc as well as artwork
Reply
:iconkovowolf:
KovoWolf Featured By Owner Dec 3, 2012  Professional General Artist
Great article!
Reply
:iconmiontre:
miontre Featured By Owner Dec 3, 2012  Hobbyist Photographer
:love:

Great contribution neuro! :D Interesting to read. :)
Reply
:iconmaytel:
maytel Featured By Owner Dec 3, 2012
This is posted in the future!
I love those css shapes!!! thanks!
Reply
:iconthorns:
thorns Featured By Owner Dec 3, 2012   Writer
:love:
Reply
:iconneurotype:
neurotype Featured By Owner Dec 3, 2012  Hobbyist General Artist
I've totally used the CSS triangles before :dummy:
Reply
:iconmiontre:
miontre Featured By Owner Dec 3, 2012  Hobbyist Photographer
:lol: I used it once too; because I couldn't be bothered making an image and going through the hassle of uploading it, and then linking to it in my CSS, and then what if the image doesn't load for someone :fear:
Reply
:iconneurotype:
neurotype Featured By Owner Dec 4, 2012  Hobbyist General Artist
:lol: Nice.

I don't think a little triangle would be bad on anyone's system though!
Reply
:iconmiontre:
miontre Featured By Owner Dec 4, 2012  Hobbyist Photographer
Good point! :lol: But I'm a perfectionist. :B
Reply
:iconneurotype:
neurotype Featured By Owner Dec 4, 2012  Hobbyist General Artist
:nuu:
Reply
:icon4everyoungkid:
4EverYoungKid Featured By Owner Dec 3, 2012
:iconneurotype: :dummy:
Reply
:iconmiontre:
miontre Featured By Owner Dec 3, 2012  Hobbyist Photographer
:iconimhappyplz:
Reply
:iconneurotype:
neurotype Featured By Owner Dec 3, 2012  Hobbyist General Artist
:la:
Reply
:iconclefairykid:
ClefairyKid Featured By Owner Dec 3, 2012
:la:
Reply
Add a Comment:
 
×

:iconbradleysays: More from bradleysays


Featured in Collections

DACelebs by MisDmeanor

Gallery CSS by IridescentStardust

CSS Help by PirateLotus-Stock


More from DeviantArt



Details

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

Stats

Views
19,542
Favourites
90 (who?)
Comments
51
×