Ik ben een beetje aan het rommelen met CSS3 en had een unordered list gemaakt met 3 icoontjes. Deze 3 icoontjes hebben een opacity van 50%, die bij een hover m.b.v. CSS3 naar een opacity van 100% overgaan.
Om de één of andere reden had ik 't werkend maar verdween het effect. Ik heb m'n stappen alweer terug genomen, maar ik kom er helaas niet uit. Zou iemand toevallig even een blik kunnen werpen om te zien wat ik over het hoofd zie?
Dit is de paginahttp://www.joramoudenaarde.com/html6/
En dit is de CSShttp://www.joramoudenaarde.com/html6/css/style.css
Alvast bedankt!
Mvg,Joram
p.s.: ik dacht ook even dat ik display:block op ".social li a" moest zetten, maar dat loste het probleem van wat ik kon zien niet op in ieder geval.
geblokkeerd
HTML<ul id="media-nav"> <li class="social"><img src=".." alt=".." /></li> <li class="social"><img src=".." alt=".." /></li> <li class="social"><img src=".." alt=".." /></li></ul>CSSli.social img { opacity: 0.5; ....}li.social img:hover { opacity: 1.0; ....}
<ul id="media-nav"> <li class="social"><img src=".." alt=".." /></li> <li class="social"><img src=".." alt=".." /></li> <li class="social"><img src=".." alt=".." /></li></ul>
CSS
li.social img { opacity: 0.5; ....}
li.social img:hover { opacity: 1.0; ....}
Overigens, als ik jouw voorbeeld gebruik, en er een horizontale list van maak, dan verdwijnt ook gelijk het hover-effect om de één of andere reden eigenlijk net zoals bij m'n huidige list. Misschien dat ik daar ergens de mist mee in ga?
<!DOCTYPE html><html> <head> <title>voorbeeldje</title><style>li {display: inline;{li.social img { opacity: 0.5; .... } li.social img:hover { opacity: 1.0; .... } </style></head><body><ul id="media-nav"> <li class="social"><img src="img/dribbble.png" alt="Joram Oudenaarde" /></li> <li class="social"><img src="img/dribbble.png" alt="Joram Oudenaarde" /></li> <li class="social"><img src="img/dribbble.png" alt="Joram Oudenaarde" /></li> </ul>
li {display: inline;{
li.social img { opacity: 0.5; .... }
li.social img:hover { opacity: 1.0; .... } </style>
</head><body>
<ul id="media-nav"> <li class="social"><img src="img/dribbble.png" alt="Joram Oudenaarde" /></li> <li class="social"><img src="img/dribbble.png" alt="Joram Oudenaarde" /></li> <li class="social"><img src="img/dribbble.png" alt="Joram Oudenaarde" /></li> </ul>
(Bewerkt door joram om 14:00, 2-05-2012)
http://cssdesk.com/KtEDW
Waarom ik het op deze manier doe?Eigenlijk omdat ze mij altijd hebben geleerd dat wat je target moet je ook benoemen. Je wilt een effect maken op de icons niet op de link, de linkjes dienen op dit moment nergens anders voor dan om naar een andere pagina te surfen. De afbeeldingen (icons) daar zit het effect op + is het hoogst-liggende onderdeel in de HTML.
Doe maar eens vanuit een Webkit browser rechtermuis > inspecteer element terwijl je cursor bovenop een icon staat dan zie je dat de Webinspector ook de afb. kiest <.img.> tag en niet de URL <.a.> tag dus dat zou dan ook je target moeten zijn.
Dan zal dat het verschil wel zijn denk ik mij hebben ze nooit iets uitgelegd. Ik ben nog steeds op zoek naar een avondopleiding html/css (geen Dreamweaver) die niet gecancelled wordt, hehehe.
Ik had ondertussen ergens een voorbeeldje gevonden waarmee ik 't ook goed werkend heb gekregen, maar ik ga deze even omzetten naar hoe jij 't hebt gedaan dat ziet er een stuk netter uit dan wat ik heb in ieder geval.
Ik liep nog wel tegen een ander probleem(pje) aan met m'n content-hovers. Ik probeer namelijk met CSS3 een afbeelding rond te krijgen (met border-radius), en daar dan bovenop een transparante border neer te zetten. Het lijkt erop dat CSS3's border-radius niet zonder slag of stoot werkt met afbeeldingen. Heb je daar toevallig ook ervaring mee?
Ik heb alleen een klein nieuw puntje waar ik niet helemaal uit kom eigenlijk maar iets kleins, maar ik zie geloof ik iets over het hoofd. Ik heb een section met daarin een afbeelding, h3 en p. De afbeelding krijgt een border die óver de afbeelding heen moet staan, maar dat krijg ik niet helemaal voor elkaar. Ik was al begonnen met een span over de afbeelding te zetten, maar ook dat wilde niet helemaal lukken
Het gaat om deze link:www.joramoudenaarde.com/html3
En om deze 2 stukjes code:
.portfolio a { text-decoration: none; color: #363636; }.portfolio a:hover { color: #000; }.portfolio a img { box-shadow: inset 0 0 0 3px #f47920;; box-shadow: inset 0 0 0 3px rgba(244, 121, 32, 0.7); }.portfolio a:hover img { box-shadow: inset 0 0 0 10px #f0a900;; box-shadow: inset 0 0 0 10px rgba(240, 169, 0, 0.7); }<article class="portfolio"> <a href="#" title="projectname"> <span class="imgborder"><img src="img/test.png" alt="thumbnail" /></span> <h3>Title</h3> <p>description</p> </a></article>
.portfolio a:hover { color: #000; }
.portfolio a img { box-shadow: inset 0 0 0 3px #f47920;; box-shadow: inset 0 0 0 3px rgba(244, 121, 32, 0.7); }
.portfolio a:hover img { box-shadow: inset 0 0 0 10px #f0a900;; box-shadow: inset 0 0 0 10px rgba(240, 169, 0, 0.7); }
<article class="portfolio"> <a href="#" title="projectname"> <span class="imgborder"><img src="img/test.png" alt="thumbnail" /></span> <h3>Title</h3> <p>description</p> </a></article>
Hoe ik de border rond moet maken is geen probleem (gelukkig) alleen hoe ik de border bovenop de afbeelding moet krijgen wil niet helemaal lukken. Zou je me hier toevallig ook mee uit de brand willen helpen?
(Bewerkt door joram om 20:27, 2-05-2012)
Maar hier heb je al de border radius OP een afbeelding. dus img -> class = cut.En de glow kun je natuurlijk verwijderen uit de class das alleen om te tonen dat je een class moet maken AAN de IMG en niet aan de span of div..
http://cssdesk.com/nD3EE
In de CSS van m'n vorige post kun je zien wat ik bedoel: .portfolio a:hover img is er bijvoorbeeld één van. Ik dacht namelijk dat ik deze nog verder kon uitbreiden naar .portfolio a:hover img.border, maar dat mocht niet baten.
p.s.: bedankt voor je hulp in ieder geval tot zover!
Een inset shadow ding boven-op de border radius?http://cssdesk.com/hUmmX
Uncomment de border 1px solid om nog een extra lijntje rondom de afbeelding mee te geven, wil je dat niet verwijder die twee regels.
Drie kleine tips in je HTML:
(1) Je gebruikt <.section.> en daar binnen een <.div id="sidebar".> dat kan korter door de div ID eruit te laten en een Aside te gebruiken. <.aside id="sidebar".>
(2) Binnen de Aside maak een <.header.> aan met daarin je naam plus logo <.h1.>
HTML<aside id="sidebar"> <header> <h1 id="branding">Je naam en Achternaam</h1> <img src="logo.png" alt="logo" /> </header> <nav> -blaat- </nav></aside>CSSh1#branding { display: none;}
<aside id="sidebar"> <header> <h1 id="branding">Je naam en Achternaam</h1> <img src="logo.png" alt="logo" /> </header>
<nav> -blaat- </nav></aside>
h1#branding { display: none;}
(3) Met een super kleine website als deze voeg alle CSS samen in één stylesheet het is echt niet nodig om 10 regels CSS in een aparte reset.css te plaatsen. + Een eigen @font-face.css met daarin 8 regels en een style.css met nog eens 100 regels. Samen kom je straks niet eens boven de 350 regels dat kan makkelijk in één stylesheet wel zo overzichtelijk..
(Bewerkt door Shmoo om 2:23, 3-05-2012)
Ik had een aantal css-tags tussen comments gezet zodat ik wat makkelijker kon teruggrijpen om even een border of achtergrondje te plaatsen als ik de draad kwijt ben. Zodra de site online gaat haal ik dat allemaal weg
De Aside had ik wel bij stil gestaan, maar in het W3C staat dat deze gebruikt wordt voor content die met de "main content" te maken heeft. Zoals (wat ik ervan begreep) een omschrijving over een afbeelding, waarbij de omschrijving in Aside staat terwijl de afbeelding in "Section" staat. Maar ik kan een Aside plaatsen geen probleem
Die reset.css hou ik wel liever apart, puur om voor mezelf 't overzicht te houden ik ben al niet zó'n held met html/css namelijk, hehe. Maar aan de @font-face kan ik niet héél veel doen: da's een Google web font namelijk, dus die kun je alleen extern laden Google host deze fonts namelijk.
Had je toevallig nog een idee hoe ik die inset-shadow op de img kan krijgen? Ik weet dat dat kan door de img een ID of Class te geven, maar die inset shadow moet ook een a:hover krijgen namelijk en daar raak ik de draad bij kwijt, hehe. Ik wil namelijk zowel de afbeelding als "title" als "omschrijving" een a:hover meegeven. Bij de 2 tekstjes lukt dat prima, maar óók nog een inset-shadow met hover lukt me niet zo
Waar heb jij trouwens html/css geleerd? Voor je opleiding of avondopleiding ofzo? Ik moet nodig weer eens kijken of die cursussen ondertussen weer echt doorgaan. Had me destijds 2-3x ingeschreven, maar toen hij telkens gecancelled werd heb ik er maar vanaf gezien.
De border om de afbeeldingen heen staat nog tussen /* uncomment */ als je daar border 3px inset #kleur van maakt dan heb je een inset border om de afbeelding.
Het voorbeeld heeft een inset shadow + border 1px solid welke je nog even uit de uncomment moet halen en een inset van maken.
Of ik moet het niet begrijpen..
Hoe heb ik het geleerd?Geen idee door gewoon te kijken, doen, vragen en nog eens doen denk ik.
Ik ben begonnen met het aanpassen van typische template templates. Die van TemplateMonster.com dus standaard websites die een echte template feeling hebben en waar je 300 aanpassingen aan kunt doen maar toch blijf je zien dat het een ooit template is geweest.Eerst heel simpel en alleen de kleuren van de lay-out aanpassen, daarna een afbeelding, dan eens iets verwijderen of toevoegen en na een tijdje heb je het steeds meer door en begin je de feeling te krijgen en durf je steeds meer te doen.
Het hele grote voordeel van het gebruikt van standaard templates is dat deze vaak gemaakt worden door professionals, dat wil dus zeggen dat het allemaal voor 99% klopt. Ze gebruiken goede Resets, perfecte lettertypes en vooral ook de afstanden tussen de regels en het aantal woorden op één rij klopt. En vergeet niet de margin's en paddings links en rechts om het allemaal mooier uit te lijnen dat zijn allemaal dingen waar een beginner direct op faalt omdat ze tekst koud tegen de kantlijn aanzetten.
Het is denk ik ook een kwestie van echt willen, je aansluiten bij een goede community waar alleen maar gepraat wordt over webdesign en gewoon meedoen met de discussies. Na een tijdje weet je gelijkt wie er bepaalde ervaringen hebben en wie je wel of niet moet blijven volgen.Maar dat is bij elk forum -/community wel het geval, de mensen hier op MacFreak die al wat langer lid zijn en 2500+ posts achter hun naam hebben lossen vaak problemen binnen 1 a 2 reacties op, aan de hand van deze oplossingen kun je heel eenvoudig zien of iemand echt weet waar hij het over heeft en als deze persoon in jouw straatje past.
Dus ik weet niet of jij veel zal leren op een cursus webdesign. Deze zijn vaak gericht op mensen die nul komma nul ervaring hebben en dan zit jij dus waarschijnlijk 75% van de tijd uit je neus te eten omdat je al weet hoe je een linkje maakt en een afbeelding kan toevoegen en wat de meeste tags inhouden.HTML en CSS is meer een basis die vrij eenvoudig te leren is door gewoon te doen en proberen. Ze vertellen je op een cursus wat er allemaal mogelijk is en wat bepaalde tags kunnen doen maar ze kunnen je niet leren welke je moet gebruiken omdat dit afhangt van wat je wilt maken en er vaak meerdere antwoorden en mogelijkheden goed zijn.
http://www.w3schools.com/
Is DE site waar je echt ALLES stap voor stap kunt vinden, het heeft mij heel erg veel geholpen maar het kost ook veel tijd. Er is zelfs een TEST mogelijkheid door 20 vragen te beantwoorden kun je zien hoe goed je bent. ik had er één fout dus ik ben ook niet perfect, verre van ik maak websites voor mijn hobby er is ook nog een hoop dat ik niet begrijp. Bij elk project dat ik doe leer ik wel weer iets niets en zo leer je steeds meer.http://www.w3schools.com/quiztest/quiztest.asp?qtest=HTML
Dit is wat ik nu heb. Ik had al geprobeerd om een rgba-kleur in te voeren, maar dan lijkt heel de border het niet meer te doen. Weet je toevallig waar dat aan zou kunnen liggen? Ik had in de eerste instantie de hexadecimale kleuren omgezet naar een RGBa-kleur, maar dit lijkt de border in z'n geheel op z'n gat te laten gaan namelijk http://cssdesk.com/vaT7v
Ik ben al een poos bezig met het af-en-aan coderen, maar omdat ik én een drukke (en behóórlijk chaotische) baan heb, en dan ook nog een aantal andere verplichtingen heb, kan ik jammer genoeg niet genoeg tijd vrijmaken om er écht eens een aantal maanden achter elkaar flink mee aan de slag te gaan maar misschien is het lid worden van een web-development community niet eens zo'n slecht idee.
Ik heb me ook een poosje bezig gehouden met het aanpassen van Wordpress templates, maar daar kom ik vaak maar half uit. D'r zit vaak nét teveel PHP in wat ik moet copy-pasten waardoor ik de weg kwijt raak met wat ik met m'n HTML aan moet, hehe. Misschien moet ik inderdaad eens gaan knutselen met gewone HTML-templates... kijken of dat beter wil lukken
Jij plaatst nu al standaard een border van een paar pixels en vergoot deze border zodra de Hover state in actie komt. Werkt ook perfect dan kun je mijne gewoon verwijderen natuurlijk.
Slikt hij rgb(238,255,238); niet?
Normaal werkt dat altijd gewoon box-shadow: type x x x rgb(waarde,waarde,waarde); miss. dat kleine en grote letters RGB nog iets uitmaakt?
Binnen het CSSDesk voorbeeld werk dat perfect ik ze een licht groene border.
Je was al goed op weg met WordPress ik geloof dat WordPress de toekomst heeft of je het nu voor de fun gebruikt of als professional.WordPress is nog geen 10 jaar oud en pas 3 of 4 jaar een serieus CMS en nu al voelen andere CMS'en dat WordPress aanwezig is en meer dan dat.
Het mooie van WordPress is is dat het eenvoudig is zowel voor de fun als voor de pro. Maar beide gebruiken het toch nog steeds op hun eigen manier. Heb je HTML en CSS ervaring dan weet je waar een stukje HTML begint en waar het eindigt alles daar tussen zal PHP zijn en raak je niet aan tenzij iemand daar opdracht voor geeft. Als je dat doet is er nooit iets aan de hand. Want je HTML tags met daar tussen de PHP kun je gewoon verplaatsen naar andere posities.
Ik heb ook geen ervaring met PHP maar dankzij WordPress heeft het mij nog nooit weerhouden van het maken van websites die ik graag wilde maken.
In een tutorial die ik aan het maken ben wil ik aantonen dat de default WordPress thema's zo onderschat zijn alleen omdat ze WIT en kaal ogen maar met HTML en CSS ervaring bouw je alles dat je wilt vanaf zo'n default thema omdat de basis zo strek is.
Voorbeeldje.
(default Twenty Ten thema direct na installeren)http://i47.tinypic.com/j9amqf.png
(transformatie van de homepage)http://i47.tinypic.com/oqwyrm.png
In deze transformatie zitten 2 regels PHP die ik zo copy-/paste uit de WordPress Codex hebt gehaald alleen om een tweede Menu functie in de website te bouwen die straks vanuit het Dashboard te beheren is. De rest is allemaal CSS werk, wat Photoshoppen en de (image) Banner eruit slopen dat is 2 tellen werk.
Ik ben zelf echt een fan van Wordpress qua gebruik. Het is soms jammer dat je voor een kleine(re) site nog steeds al die toeters en bellen in het admin-panel hebt, maar alles is makkelijk in te stellen en terug te vinden gelukkig. Als ik me op ten duur dusdanig thuisvoel in html/css ben ik zeker van plan om daar een template voor te maken in ieder geval!
Da's trouwens een mooie aanpassing op die bestaande template zeg!
Na wat testen bleek dat de transition niet lekker samen te gaan met de box-shadow en die nekte hem dus heb ik die trans. een eigen class gegeven.
http://cssdesk.com/5yEcs
Ik hoor wel vaker dat mensen graag een hoop aanpassingen willen doen aan het Dashboard van WordPress maar ze hebben dit met de reden zo gedaan dat iedereen altijd het zelfde Dashboard voor zijn neus heeft. Hierdoor kunnen mensen op de forums elkaar veel beter helpen.
Maar de menu-items zijn te verwijderen of beter gezegd te verbergen want je kunt ze daarna nog altijd intikken en bezoeken als je het adres weet.
Door deze code in de functions.php te plakken.
( // streepjes ervoor weghalen of toevoegen)
add_action( 'admin_menu', 'Wps_remove_tools', 99 );function Wps_remove_tools(){ // remove_menu_page( 'index.php' ); //dashboard// remove_menu_page( 'edit.php' ); //posts// remove_menu_page( 'upload.php' ); //media remove_menu_page( 'link-manager.php' ); //links// remove_menu_page( 'edit.php?post_type=page' ); //page remove_menu_page( 'edit-comments.php' ); //comments// remove_menu_page( 'themes.php' ); //appearance remove_menu_page( 'plugins.php' ); //plugins remove_menu_page( 'users.php' ); //users remove_menu_page( 'tools.php' ); //tools// remove_menu_page( 'options-general.php' ); //settings }
De code hierboven is voor het gehele Menu item te verbergen en hieronder voor alleen Sub-items. (dropdown)
function Wps_remove_menu_elements() { remove_submenu_page( 'plugins.php', 'plugin-editor.php' ); //plugin editor remove_submenu_page( 'themes.php', 'themes.php' ); //theme option remove_submenu_page( 'themes.php', 'nav-menus.php' ); //nav menu remove_submenu_page( 'themes.php', 'theme-editor.php' ); //editor } add_action('admin_init', 'Wps_remove_menu_elements');
Dit soort code snippets zijn typisch voorbeelden van PHP code die ik wel kan lezen-/begrijpen maar ik zou er zelf nooit opgekomen zijn dus is puur Google -> copy-/paste -> testen en als het werkt opslaan en vaker gebruiken.
Maar dat effect is zelfs precíés waar ik naar op zoek was, enórm bedankt! Hier ga ik dit weekend eens mee sleutelen om dat werkend tesamen met m'n andere hover-effecten te combineren. De tekst "TITLE" en "description" hebben nu namelijk al een hover-effect, welke gelijk moet opgaan met de box-shadow van de afbeelding. Dat gaat een mooie uitdaging voor het weekend worden!
Ik heb aan de hand van jouw laatste voorbeeld nu 2 thumbnails:http://www.joramoudenaarde.com/html3/
De eerste thumbnail is met jouw code, aangevuld met de titel en omschrijving, en licht aangepast met het effect wat ik uiteindelijk wil (wat prima lukt gelukkig). Deze doet precies wat ik wil, behalve dat ik de box-shadow niet goed krijg. Als ik de "h2" en "p" buiten de "a" zet dan doet het hover-effect het niet en staat de tekst ín de foto (begrijpelijk). Zet ik ze in de "a" dan valt de border ook om de tekst heen, en die krijg ik dan niet goed.
Bij de tweede thumbnail heb ik jouw code geprobeerd te combineren met wat ik had (de tekst buiten de box-shadow). De tekst hovert, de image is omsloten met een span waarmee ik, net als bij jouw code, de box-shadow probeer te regelen en bij deze krijg ik die hele box-shadow niet te zien.
Zou je me misschien kunnen vertellen wat ik verkeerd doe alsjeblieft? Ik zie dat ik iets niet helemaal goed heb met de css, want bij beide thumbnails heb ik de html volgens mij goed staan maar het kwartje wat ik nou verkeerd doe valt maar niet.
't Is de laatste keer, beloofd!
(Bewerkt door joram om 22:03, 6-05-2012)
Op deze manier?
De #work:first-child heb ik erin geplaatst om van de kantlijn af te komen. Volgens mij werkt dat niet in IE8 dus kun je ook #work-one, #work-two, #work-... enz enz enz aanmaken.
Werkt de pseudo-class "first-child" niet in IE8? Mwoah, ik zal m'n Google Analytics account even nakijken om te zien of IE8 regelmatig voorkomt in de bezoeken. Mocht dat niet zo zijn dan hoef ik ook niet zo nodig support te leveren voor die versie IE. IE8 ondersteunt toch een aantal CSS3-mogelijkheden niet, dus daar support voor geven zet ik even wat later op het lijstje "to-do"
Bedankt voor je hulp in ieder geval!
p.s.: zie nu dat "first-child" als het goed is (gelukkig) wel gewoon ondersteund wordt in IE8!http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx
Weer een meevaller ik kan alleen geen ":focus" gebruiken in combinatie met first-child, maar dat komt dan wel goed.
http://www.w3schools.com/cssref/sel_firstchild.asp
Je bent alleen verplicht een doctype te gebruiken maar als je dat niet doet dan werkt heel veel niet meer op vandaag.
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
If browser is lager dan IE9 > include de html5.js dan weet je zeker dat IE8 de first-child kan lezen.
Ik had wel een ander stukje JavaScript wat ervoor zorgt dat oudere IE's (6 en 7 vooral) voorziet van manieren om, áls er CSS3 is gebruikt zoals schaduwen e.d., dat deze via JavaScript alsnog te zien zijn in oudere IE's. Maar 6 en 7 zijn ondertussen zó oud en weinig gebruikt om m'n URL te bezoeken dat ik die achterwege ga laten, hehe.
(dan moeten ze maar een "echte" browser gebruiken )
* Uitzondering is natuurlijk als je websites maakt voor de Aziatische markt. Daar hebben heel veel mensen nog bewust IE6 en IE7 omdat de internet verbindingen daar nog wel eens heel langzaam kunnen zijn van streek tot streek (armoede + inbel-verbindingen) Dan zijn oude PC's met oude software goedkoper en beter.
Gast
