zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden box-shadow top&buttom

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.04.2012, 02:15
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard box-shadow top&buttom

hi leute,
ich möchte mit hover ein box-shadow top&buttom erreichen aber das kann man garnicht machen oder? (ohne left&right)
ich weiss garnicht wie ich den shaddow in die länge ziehen könnte um das zu erreichen...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.04.2012, 19:50
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.04.2012
Beiträge: 163
schatzi sorgt für eine eindrucksvolle Atmosphäreschatzi sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo!

Nein, direkt über "box-shadow" wirst du das wohl nicht hinbekommen.
Da CSS3 bei dir aber erlaubt zu sein scheint, könnte man das per "gradient" hintricksen.

Body:
HTML-Code:
<div id="test">
    <ul>
        <li><span><a href="#">test1</a></span></li>
        <li><span><a href="#">test2</a></span></li>
        <li><span><a href="#">test3</a></span></li>
        <li><span><a href="#">test4</a></span></li>
        <li><span><a href="#">test5</a></span></li>
    </ul>
</div>
CSS:
HTML-Code:
    *{
        margin: 0;
        padding: 0;
    }
    #test{
        margin: 20px;
    }
    #test ul{
        list-style: none;
    }
    #test ul li{
        float: left;
    }
    #test ul li span{
        display: block;
        margin-right: 5px;
        padding: 10px 0;
    }
    #test ul li span a{
        display: block;
        background: #f00;
        padding: 10px;
    }
    #test ul li span:hover{
        background: -moz-linear-gradient(top, #fff 0%, #000 20%, #000 80%, #fff 100%);
    }
Getestet im FF12.
Probier's mal aus, ob es deinen Vorstellungen entspricht.

PS: Persönlich würde ich das über background-images lösen, dann bist du auch bei älteren Browsern auf der sicheren Seite.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.04.2012, 19:52
Neuer Benutzer
neuer user
 
Registriert seit: 30.04.2012
Beiträge: 16
celine befindet sich auf einem aufstrebenden Ast
Standard

Hi gandalf!
Glaub das sieht nicht gut aus mit dem CSS-Effekt. Du könntest aber eine Grafik erstellen und die per CSS bei Hover als Hintergrund anzeigen lassen. Das sieht dann in jedem Browser auch gleich aus.

Liebe Grüße
Celine
Mit Zitat antworten
  #4 (permalink)  
Alt 01.05.2012, 15:21
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

danke für eure mühe
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Box Shadow Inset (eine seite) gandalf_hh CSS 18 18.01.2012 17:53
ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!? damonster CSS 12 27.08.2008 16:56
ps design (slices), php (dynamischer inhalt), css gestaltung schleepy CSS 19 02.06.2006 23:46
Kniffliges Layout mit float Roadrunnerle CSS 6 14.03.2006 12:26
#boxes a:hover.info: 2.posting mit css !!! marioN CSS 5 25.01.2004 18:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:27 Uhr.