#background-position

[josegremarquez]

Personaliza tus Páginas Web con Fondos en HTML5 y CSS

Los fondos son un elemento fundamental en el diseño web, ya que permiten crear atmósferas y establecer el tono visual de una página. En este artículo, exploraremos las diferentes formas de agregar y personalizar fondos en HTML5 y CSS, desde simples colores hasta imágenes de fondo complejas. Colores de Fondo La forma más sencilla de agregar un fondo a un elemento es utilizando un color…

Personaliza tus Páginas Web con Fondos en HTML5 y CSS

[blogitdotvn-blog]

Background trong CSS

Background và text trong CSS được dùng như thế nào?

Ở bài trước chúng ta đã cùng nhau tìm hiểu một số định nghĩa cơ bản về  CSS, cũng như cách viết một CSS đơn giản và nhúng chúng vào trong HMTL ra sao.

Tiếp tục trong series này chúng ta sẽ lần lượt tìm hiểu chi tiết từng thành phần cơ bản trong CSS. Trong bài thứ hai này chúng ta sẽ tìm hiểu về background và text.

Background là gì?

Background là…

View On WordPress

[kayac-five]

background-positionは通常jQueryのanimateで操作することができません。 プラグインをつかえば動かすことができるようになりますが、今回は自前で実装してみましょう。 方針としてはjQueryのanimateでmodelの値をイージングをかけて変化しつつ、その値をviewのcssプロパティにいれていこうと思います。 DEMO JavaScript (function(win, doc, $) { "use strict"; var $x = $(".x"), $y = $(".y"), $xy = $(".xy"), $model = $({x: 0, y: 0}), …

background-positionをアニメーションさせる。

---

ここでいうrender関数はanimateとタイミングが合わないので、間引く意図がなければanimateのprogress引数（かstep引数）を設定して使うのがおすすめです！

[nraboy]

Adding Background Images To Ionic Framework Apps

Adding Background Images To Ionic Framework Apps

I started working on an app and decided it was time to step up my design game.  Usually my apps suffer from looking plain or dated even though they have some insanely awesome functionality (ex: OTP Safe).  However, after looking at many other apps, I came to the conclusion that an app can look more attractive just by including a logo or some other kind of branding images.

The tricky part here is,…

View On WordPress

[inline-block-blog]

Background-position à droite avec une marge

Il se peut que la créa présente un bouton avec une icône aligné à droite, rien de plus facile en inté avec background-position en css ! background-position avec le left qu'il faut en px ! Si on ne peut pas savoir la taille du bouton qui peut varier selon le contenu par exemple, on ne peut pas adopter une valeur fixe du left. Il est possible au niveau de la position du fond de la mettre à droite et du coup ne pas se soucier de la taille du bouton, en css :

.bg{ background-position : right center; }

Exemple en ligne. L'inconvénient c'est que ça colle la bordure de droite et on aimerait avoir un peu d'espac entre l'icône et la bordure de droite, avec CSS3 on peut définir un espace à droite par exemple de 10px en css :

.bg{ background-position : right 10px center; }

Exemple en ligne. Ça fonctionne bien, le rendu est satisfaisant sauf que les anciennes versions d'IE ne le comprennent pas.

Pour avoir un rendu identique sur chaque navigateur : Si votre bouton a une couleur unie en fond, pour avoir ce décalage de l'icône serait d'avoir une bordure de droite de la même couleur et de laisser la position du fond à droite :

.bg{ background-position : right center; background-color : #789; border-right : 10px solid #789; }

Exemple en ligne. Pensez à adapter le padding-right en conséquence. Si le fond de votre bouton n'est pas une couleur unie, une autre solution, serait au découpage de laisser un vide transparent en plus à droite de l'icône pour simuler en dure l'espace, à la place de rogner l'image complétement. Ça peut paraître pas très propre mais ça marche !!!.

[magicupload-blog]

Free Social Media Sharing Menu with jQuery / CSS

Amplify’d from www.magicupload.com

Free Social Media Sharing Menu with jQuery / CSS

Make Social Media Sharing Menu using basics CSS such as the CSS background-position property and a little jQuery to make the links animated.

Read more at www.magicupload.com

 See this Amp at http://bit.ly/hbqktG