Ich habe heute etwas kleines Designt. Es geht um <noscript>.
Habe etwas länger gebraucht um etwas schönes wie auch nichs aufdringliches zu designern.
Ich finde es:
- schön
- dezent
- angenehm anzusehen
Dafür ist extra noch ein icon mit eingebunden, damit der User auch merkt, dass man dort wohl etwas machen kann.
Außerdem wird beim "hovern" die Hintergrundfarbe ein Müh (richtig geschrieben? xD) kräftiger, damit der User aufmerksamer wird.
- Code: Alles auswählen
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8" />
<style type="text/css">
body, ul, li, p, noscript, h6
{
margin: 0;
padding: 0;
font-size: 14px;
text-align: center;
font-family: lucida grande,tahoma,verdana,arial,sans-serif;
}
noscript
{
text-align: center;
display: block;
/* --> volle breite */
background-color: #FFF9D7;
border: 1px solid #E2C822;
overflow: hidden;
line-height: 1.42em;
height: 38px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
noscript:hover
{
cursor: pointer;
padding-bottom: 25px;
/*height: auto; geht nicht, weil dann transition nicht funktioniert*/
background-color: #FFF9C7;
}
noscript #mitte
{
/* text-align: center; */
/* bereits im body definiert */
width: 300px;
/* breite so anpassen, dass das bild gut an der h6 anliegt */
margin: 0 auto;
}
noscript #mitte h6
{
display: block;
/*wenn kein block verschiebt sich ALLES in die erste reihe*/
font-weight: bold;
font-size: 18px;
margin: 10px 0;
background-image: url(cursor.png);
/*http://findicons.com*/
background-position: right;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!-- Kein JavaScript -->
<noscript>
<div id="mitte">
<h6>JavaScript ist deaktiviert.</h6>
</div>
Bitte aktivieren sie JavaScript in den Einstellungen ihres Browsers, oder benutzen Sie einen JavaScript fähigen Browser.
</noscript>
<!-- / Kein JavaScript -->
</body>
</html>
Findet ihr dies ist zu aufdringlich? Und findet ihr es überhaupt hübsch?
Tipp: Damit ihr nicht erst Javascript ausschalten müsst, könnt ihr einfach jedes <noscript> zum beispiel durch header ersetzen xD
