Website Design
ASP-NET
Aufruf Google Übersetzer Von ASP.NET Mit Beitrag
Erstellen eines RSS-Feed für Ihre Website Im ASP-NET und SQL Server
Erstellung einer XML-Sitemap von SQL Server In ASP NET
Gespeicherte Prozedur mit mehreren Datensätzen auf Web-Seite
Social Media Tweet Empfehlen Wie Follow Button für Google Twitter und Facebook
Temporäre Daten im Gridview
Website Sicherheit
CSS
Neues Fallende Gegenstände in CSS
Scrolling CSS erstellen
Ousia
Datenbank-Beratungsdienste
Werkzeuge
Claytabase Server Disk IOPs Calculator
Verwenden von SQL Server Funktionen
Berechnen Sie den Abstand zwischen zwei Längengrad-Koordinaten
Die Berechnung der Arbeitstage innerhalb eines Monats in SQL Server
Die Berechnung der Arbeitstage zwischen zwei Daten
Funktion zum Auftrennen von Text in die Datenzeilen in SQL Server 2008
Hinzufügen von Arbeitstage zu einem Datum
Reinigung der UK-Adresse Postleitzahlen in SQL Server 2008
Reinigung von Textzeichenfolgen in SQL Keeping Buchstaben und Zahlen
Spezifische Funktion zum Tag des Monats Zurück
Überprüfen Telefonnummer ist in der richtigen UK-Format mit SQL Server 2008
SQL Server 2008 Wartungsplan
Datenbank aus gespeicherten Prozedur wiederherstellen
Komplett Entfernen von Benutzern von SQL Server
Festplatten-und Datenbankgröße Alerts
Töte alle Verbindungen zur ausgewählten Datenbank
Wiederaufbauen oder Reorganisieren von fragmentierten Indizes
SQL-Server
CUSIP Hilfe Sie sich die Format-Funktion in SQL
Ihren eigenen Content Management System Build in SQL Server und ASP.NET
ISIN prüfen korrekte Format-Funktion in SQL
SEDOL prüfen Korrekte Format-Funktion in SQL
Cloud Services
Microsoft Azure
Artikel
Anfordern von SSL und Generierung von PFX-Datei in OpenSSL Simple Steps
Microsoft Office
Sozialen Medien
Mappe
Erstellen Sie Scrolling CSS
Scrollen kann viel Platz sparen und kann sehr zart in CSS3 behandelt werden, gepaart mit der Kraft von CSS Sprites Bild und etwas Mathe, werden wir dieses Bild unten in die rotierende Banner.
Dies ist der Sprite, den wir als Hintergrund für die Links verwenden werden.
Um so ein rotierendes Banner zu erstellen. Alle Links zeigen auf Claytabase Social Media Kanäle.
CSS
<
style
type
="text/css">
/*Sprite Backgrounds*/
.smFbk64
{
background-position
:
0px
-0px
}
.smTwi64
{
background-position
:
-66px
-0px
}
.smGoo64
{
background-position
:
-132px
-0px
}
.smLin64
{
background-position
:
-198px
-0px
}
.sm64
{
width
:
64px
;
height
:
64px
;
display
:
inline-block
;
overflow
:
hidden
;
background-image
:
url('https://www.gsclayton.net/System/Artwork/Articles/SocialMedia_64.png')
;
background-repeat
:
no-repeat
;}
.rnd50
{
border-radius
:
50%
}
/*Moving Parts*/
.parentDiv
{
width
:
64px
;
height
:
64px
;
overflow
:
hidden
;
margin
:
auto
}
.followDiv
{
width
:
320px
;
height
:
64px
;
position
:
relative
;
animation
:
followDivSlide
ease
infinite
10s
;
-webkit-animation
:
followDivSlide
ease
infinite
10s
;
-moz-animation
:
followDivSlide
ease
infinite
10s
;
-webkit-animation-fill-mode
:
forwards
;
-moz-animation-fill-mode
:
forwards
;
animation-fill-mode
:
forwards
;}
@keyframes
followDivSlide
{
from
{
left
:
0px
;}
15%
{
left
:
0px
;}
25%
{
left
:
-64px
;}
40%
{
left
:
-64px
;}
50%
{
left
:
-128px
;}
65%
{
left
:
-128px
;}
75%
{
left
:
-192px
;}
90%
{
left
:
-192px
;}
to
{
left
:
-256px
;}}
@-webkit-keyframes
followDivSlide
{
from
{
left
:
0px
;}
15%
{
left
:
0px
;}
25%
{
left
:
-64px
;}
40%
{
left
:
-64px
;}
50%
{
left
:
-128px
;}
65%
{
left
:
-128px
;}
75%
{
left
:
-192px
;}
90%
{
left
:
-192px
;}
to
{
left
:
-256px
;}}
@-moz-keyframes
followDivSlide
{
from
{
left
:
0px
;}
15%
{
left
:
0px
;}
25%
{
left
:
-64px
;}
40%
{
left
:
-64px
;}
50%
{
left
:
-128px
;}
65%
{
left
:
-128px
;}
75%
{
left
:
-192px
;}
90%
{
left
:
-192px
;}
to
{
left
:
-256px
;}}
</
style
>
/*HTML*/
<
div
class
="parentDiv">
<
div
class
="followDiv"><
a
class
="sm64 rnd50 smFbk64"
href
="https://www.facebook.com/Claytabase"></
a
><
a
class
="sm64 rnd50 smTwi64"
href
="https://twitter.com/claytabase"></
a
><
a
class
="sm64 rnd50 smGoo64"
href
="https://plus.google.com/+ClaytabaseCoUk"></
a
><
a
class
="sm64 rnd50 smLin64"
href
="https://www.linkedin.com/company/claytabase-ltd"></
a
><
a
class
="sm64 rnd50 smFbk64"
href
="https://www.facebook.com/Claytabase"></
a
></
div
>
</
div
>
Der Sprite
Das Bild ist 8x64 breit und 8x64 hohe Bilder kombiniert als Bild 658px breit und 196px hoch, wir interessieren uns nur nur die ersten 4 Bilder im Moment.
Wir erstellen 4 CSS-Klassen für jeden von ihnen, um mit der Shorthand-Hintergrundeigenschaft zu erstellen.
Wie Sie sehen können, hat das Bild einen Platz von 2px zwischen jedem Bild, also fügen wir das der Position hinzu, -68px etc.
Wir können auch 2 gemeinsame Klassen wählen, um alle Gegenstände zu verwenden, sie setzen den Grenzradius und die Größe jedes Artikels.
Der Kontainer
Dies ist ein einfaches div, das genau die gleiche Breite und Höhe (64x64) wie die oben definierten Bilder, wir setzen Überlauf zu versteckt, um den Rest des Kindes zu verstecken.
Parent Div Beispiel
Das Kind / Kinder
Dies ist das zweite div, das im CSS bewegt wird. Wir setzen die Höhe auf 64px, aber dieses Mal ist die Breite muss 64px * 4 geben uns insgesamt 256px.
In diesem Beispiel wollen wir den ersten Sprite am Ende wiederholen, um einen plötzlichen Ruck zwischen Facebook und Linked In zu verhindern, also die Breite auf 320px anzupassen.
Die Animation
Unsere Animation verschiebt dann das div auf Positionen von 0px, -64px, -128px, -192px und -256px, so dass nur das eine Element an jedem Punkt während der Bewegung sichtbar ist. Siehe unten für ein Beispiel, ohne Überlauf, und auf der rechten Seite für eine Abbildung, wie die Positionierung bewegt jedes Element.