Quelle est la meilleure façon de créer basée sur des normes, des coins arrondis cross-browser compatible dans Drupal?

Question

Je travaille actuellement sur un thème Drupal 6, pour lequel designer est explicitement demandant d'utiliser beaucoup de coins arrondis.

Je pourrais bien sûr créer les coins arrondis - traditionnellement - avec des images. Mais je sais qu'il doit y avoir aussi de meilleurs moyens et plus facile de créer des coins arrondis.

Idéalement, je voudrais écrire mon CSS comme CSS3 conforme aux normes, avec des sélecteurs comme:

h2 {border-radius: 8px;}

L'utilisation de spécifique au navigateur est CSS est très OK aussi, comme

h2 {-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}

Si nécessaire, je peux aussi insérer du code JavaScript à la main sur commande. Je veux juste éviter d'ajouter encore 100 autres images de coin arrondis à mon balisage.

Toutes les suggestions sur la meilleure approche?

Answer 1

Définir une classe comme « coin roundy » et utiliser le plugin jQuery coin comme ceci:

$('.roundy-corner').corner();

Vous aurez besoin du plugin coin roundy jQuery:

http://www.malsup.com/jquery/corner/

J'aime utiliser ici JavaScript car il ne nécessite aucun balisage supplémentaire dans le document source; le script insérer des éléments d'espace réservé au besoin. En outre, dans le lointain, avenir loin quand nous avons toutes les voitures volantes et IE prend en charge le rayon de la frontière, vous pouvez le remplacer par CSS pur.

Answer 2

Quelques notes spécifiques Drupal pour utiliser le plugin coins arrondis suggérés:

1. Télécharger jquery.corner.js et de le mettre à votre dossier de scripts d'installation de Drupal. Assurez-vous de définir correctement les permissions de fichiers.
2. Charger le script dans votre thème (Zen) en ajoutant la ligne suivante à template.php: drupal_add_js('scripts/jquery.corner.js');
3. Attribuer à coins arrondis d'une partie de la page en ajoutant des commandes de style nouveau à template.php. Notez que vous devez les accrocher avec méthode drupal_add_js. Par exemple:

drupal_add_js(
  "$(document).ready(function() {
       $('#primary a').corner('top round 4px');
       $('.block-inner h2.title').corner('top round 4px');
   });",
  'inline'
);

Ca y est !!! Beaux coins arrondis sans images!