Degenen van jullie die al geruime tijd HTML schrijven, onthouden mogelijk het element. Dit was een browserspecifiek element dat een banner met verschuivende tekst over het scherm creëerde. Dit element is nooit toegevoegd aan de HTML-specificatie en de ondersteuning hiervoor varieerde sterk in browsers. Mensen hadden vaak een zeer sterke mening over het gebruik van dit element - zowel positief als negatief. Maar of je het nu leuk vond of haatte, het diende wel om content te maken die over de boxgrenzen heen liep.
Een deel van de reden dat het nooit volledig werd geïmplementeerd door browsers, afgezien van een sterke persoonlijke mening, was dat het als een visueel effect wordt beschouwd en daarom moet het niet worden gedefinieerd door de HTML, die de structuur definieert. In plaats daarvan moeten visuele of presentatie-effecten worden beheerd door CSS. En CSS3 voegt de selectiekader toe om te bepalen hoe browsers het lichteffect aan elementen toevoegen.
Nieuwe CSS3-eigenschappen
CSS3 voegt vijf nieuwe eigenschappen toe om te bepalen hoe uw inhoud wordt weergegeven in het selectiekader: overflow-stijl, marquee-stijl, marquee-play-count, tent-richting en marquee-speed.
De opties zijn Ten slotte stoot alternatief de inhoud heen en weer, heen en weer schuivend. Mogelijk moet u voorvoegsels van leveranciers gebruiken om de CSS-selectiekaderelementen te laten werken. Ze zijn als volgt: Met de laatste eigenschap kunt u definiëren hoe groot of klein de stappen moeten zijn wanneer de inhoud op het scherm in het selectiekader schuift. Om ervoor te zorgen dat uw selectiekader werkt, moet u eerst de vooraf ingestelde waarden van de verkoper plaatsen en deze vervolgens volgen met de CSS3-specificatiewaarden. Hier is bijvoorbeeld de CSS voor een selectiekader dat de tekst vijf keer van links naar rechts door een vak van 200x50 schuift.overflow-stijlDe overflow-stijl property (die ik ook heb besproken in het artikel CSS Overflow) definieert de voorkeursstijl voor inhoud die over het inhoudsvak loopt. Als u de waarde instelt op tent-lijn of tent-block je inhoud schuift naar links / rechts in en uit (tent-lijn) of omhoog / omlaag (tent-block).marquee-stijlDeze eigenschap bepaalt hoe de inhoud in beeld komt (en uit).rol, glijbaan en afwisselend. Scrollen begint met de inhoud geheel buiten beeld en beweegt dan over het zichtbare gebied totdat het volledig volledig van het scherm is. Dia begint met de inhoud volledig van het scherm af en dan gaat het over totdat de inhoud volledig op het scherm is verschoven en er geen inhoud meer is die op het scherm kan worden geschoven.marquee-play-countEen van de nadelen van het gebruik van de MARQUEE element is dat het feest niet stopt. Maar met de stijleigenschap marquee-play-count u kunt het selectiekader instellen om de inhoud een bepaald aantal keren aan en uit te zetten.tent-richtingU kunt ook de richting kiezen waarin de inhoud op het scherm moet scrollen. De waarden vooruit en omgekeerde zijn gebaseerd op de richting van de tekst wanneer de overflow-stijl is tent-lijn en omhoog of omlaag wanneer de overflow-stijl is tent-block.Marquee-Direction-details
overflow-stijlTaalrichting vooruit omgekeerde tent-lijnltr links rechts rtl rechts links tent-block omhoog naar beneden marquee-speedDeze eigenschap bepaalt hoe snel de inhoud op het scherm schuift. De waarden zijn langzaam, normaal, en snel. De werkelijke snelheid is afhankelijk van de inhoud en de browser die deze weergeeft, maar de waarden moeten dat wel zijn langzaam is langzamer dan normaal wat langzamer is dan snel.Browserondersteuning van de selectiekadereigenschappen
CSS3 Vendor Prefix overflow-x: marquee-line;overflow-x: -webkit-marquee;marquee-stijl-webkit-tent-stijlmarquee-play-count-webkit-tent-herhalingselectiekader: vooruit | achteruit;-webkit-marquee-richting: vooruit | achteruit;marquee-speed-webkit-marquee-speedgeen equivalent -webkit-marquee-increment{ breedte: 200 px; hoogte: 50px; white-space: nowrap; overloop verborgen; overflow-x: -webkit-tent; -webkit-marquee-richting: naar voren; -webkit-marquee-stijl: scrollen; -webkit-marquee-snelheid: normaal; -webkit-marquee-increment: klein; -webkit-marquee-herhaling: 5; overflow-x: marquee-line; selectiekader: vooruit; selectiekader: scrollen; selectiekader: normaal; marquee-play-count: 5;}
