Skip to content
Browse files

small design changes

  • Loading branch information...
1 parent 7555226 commit e8bea56fbf5fc5129383e380741c6e279c1d7b29 mlabod committed Jul 16, 2011
Showing with 48 additions and 28 deletions.
  1. +47 −27 editor.css
  2. BIN images/pattern.png
  3. +1 −1 index.html
View
74 editor.css
@@ -1,47 +1,62 @@
/* Simple HTML5 Editor */
+ * {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ margin:0px;
+ padding:0px;}
+
+ body {
+ background:url(images/pattern.png);
+ font-family:"Lucida Grande", "Arial", "Helvetica", Sans-Serif;
+ color:#2a2a2a}
- .texteditor {position:relative}
- *{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
- h1{margin:0;}
- body {background:#414141;font-family:"Arial", "Helvetica", Sans-Serif;color:#2a2a2a}
-
+ .texteditor {position:relative; border-top:1px solid white}
+
.texteditor .textarea {
+ color:#333;
width:100%;
margin-top:15px;
+ font-size: 14px;
+ line-height:18px;
padding:10px;
background:white;
border-radius:3px;
border:1px solid #ccc;
box-shadow:inset 0px 0px 5px #ddd}
- .textarea:focus {
- outline:none}
+ .texteditor .textarea ul {padding-left:18px;}
- footer{text-align:center;text-shadow:0px 1px 0px rgba(255,255,255,.1);}
- footer a{color:#181818; text-decoration:none;}
+ .textarea:focus {outline:none}
button {
- padding:5px 7px 4px 7px;
+ padding:3px 9px;
margin-right:8px;
border:none;
font-size:12px;
color:#777777;
text-shadow:0px 1px 0px rgba(255,255,255,1);
cursor:pointer;
border-radius:3px;
- background:-webkit-gradient(linear, left top, left bottom, from(#ececec), to(#d6d6d6));
- background:-moz-linear-gradient(top, #ececec, #d6d6d6);
- -moz-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(0, 0, 0, 0.2);
- -webkit-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(0, 0, 0, 0.2);
- box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(0, 0, 0, 0.2),0px 0px 2px rgba(0, 0, 0, 0.2);
- }
+ border:1px solid #c4c4c4;
+ background:-webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#d6d6d6));
+ background:-moz-linear-gradient(top, #e0e0e0, #d6d6d6);
+ -moz-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 0px rgba(255,255,255,0.6);
+ -webkit-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 0px rgba(255,255,255,0.6);
+ box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 0px rgba(255,255,255,0.6)}
button:hover {
- background:-webkit-gradient(linear, left top, left bottom, from(#d6d6d6), to(#ececec));
- background:-moz-linear-gradient(top, #d6d6d6, #ececec);
- -moz-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(0, 0, 0, 0.2);
- -webkit-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(0, 0, 0, 0.2);
- box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(0, 0, 0, 0.2),0px 0px 2px rgba(0, 0, 0, 0.2);}
+ -moz-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 0px 5px rgba(0,0,0,0.15), 0px 1px 0px white;
+ -webkit-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 0px 5px rgba(0,0,0,0.15), 0px 1px 0px white;
+ box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 0px 5px rgba(0,0,0,0.15), 0px 1px 0px white;
+ border-color:#c0c0c0}
+
+ button:active {
+ background:-webkit-gradient(linear, left top, left bottom, from(#d6d6d6), to(#e0e0e0));
+ background:-moz-linear-gradient(top, #d6d6d6, #e0e0e0)}
+
+ .bold {font-weight:bold}
+ .italic {font-style: italic}
.text{
padding:15px;
@@ -50,7 +65,7 @@
-moz-border-radius:0 0 6px 6px;
-webkit-border-radius:0 0 6px 6px;
-o-border-radius:0 0 6px 6px;
- border-radius:0 0 6px 6px;}
+ border-radius:0 0 6px 6px}
.main {
width:600px;
@@ -60,9 +75,9 @@
-webkit-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
- -moz-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.7);
- -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.7);
- box-shadow:0px 2px 3px rgba(0, 0, 0, 0.7);}
+ -moz-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.7);
+ -webkit-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.7);
+ box-shadow:0px 2px 3px rgba(0, 0, 0, 0.7)}
.main h1{
width:100%;
@@ -71,7 +86,7 @@
-webkit-border-radius:6px 6px 0 0;
-o-border-radius:6px 6px 0 0;
border-radius:6px 6px 0 0;
- border-bottom:1px solid #383838;
+ border-bottom:1px solid #666;
background:-webkit-gradient(linear, left top, left bottom, from(#c1c1c1), to(#a3a3a3));
background:-moz-linear-gradient(top, #c1c1c1, #a3a3a3);
-moz-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5);
@@ -80,4 +95,9 @@
color:#3f3f3f;
text-shadow:0px 1px 0px rgba(255, 255, 255, 0.5);
font-size:14px;
- padding:14px;}
+ padding:14px}
+
+
+ footer{color:#222; text-align:center;text-shadow:0px 1px 0px rgba(255,255,255,.1)}
+ footer a{color:#111; text-decoration:none}
+ footer a:hover{text-decoration:underline}
View
BIN images/pattern.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
2 index.html
@@ -28,7 +28,7 @@
<footer>
Developement by
<a href="http://www.inlovewithcss.com/" target="_blank">mlabod</a>
- & design by
+ & design improved by
<a href="http://twitter.com/Noxdzine" target="_blank">Noxdzine</a>
<br><br>

0 comments on commit e8bea56

Please sign in to comment.
Something went wrong with that request. Please try again.