- Este debate tiene 2 respuestas, 2 mensajes y ha sido actualizado por última vez el 4 años por
. This post has been viewed 632 times
Mostrando 1 respuesta al debate
-
Entradas
-
-
Recuerdo haber visto ejemplos donde mostraban cómo "alinear" imágenes, mostrando si no me equivoco, algunas banderas de países.
Estoy intentando colocar dos .BMP, uno recostado sobre el márgen izquierdo y otro recostado sobre el márgen derecho. He ralizado cambios en las propiedades aWidth y aOffset, pero, si bien se aproxima bastante a lo que pretendo, no estoy del todo conforme.
Tal vez si me pudieran indicar dónde es que están los ejemplos antedichos (no los encuento), podría darles un vistazo y aprender.
Desde ya muchas gracias.
-
La incluiremos en el próximo samples.
De momento, te lo dejo aquí
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674FUNCTION BevelBasico()LOCAL n, oStiloWITH OBJECT TWebPage():New():lContainer := .T. // Con márgenes a los lados:lFooter := .F. // Sin pie de páginaWITH object oStilo := wStyle():New( :WO ):cId := ".bandera"WITH OBJECT :addMedia():cType := "only screen":cMaxWidth := "601px"WITH OBJECT :oStyle:cHeight := "200px !important"ENDEND:Create()END WITHWITH object oStilo := wStyle():New( :WO ):cId := ".suiza"WITH OBJECT :addMedia():cType := "only screen":cMaxWidth := "601px"WITH OBJECT :oStyle:cHeight := "50px !important"ENDEND:Create()END WITHWITH OBJECT WBevel():New( :WO ):lShadow := .F.:cTitle := "<U><B>EJEMPLOS DE BEVEL</B></U>":Create()END//------------------------------------------------------------------------------// BANDERA FRANCESA//------------------------------------------------------------------------------// TítuloWITH OBJECT WBevel():New( :WO ):cTitle := "BANDERA FRANCESA":nStyle := xc_Row // el Bevel usará toda la fila:cTitleAlign := xc_Center:Create()END// Bevel contenedor de la banderaWITH OBJECT WBevel():New( :WO ):cClass := "bandera":lShadow := .T.:nStyle := xc_Row:aWidth[ xc_L ] := 6 // La anchura será de 6/12:aOffset[ xc_L ] := 3 // Con un margen izquierdo de 1/3 (para que quede centrado)// Elementos de estilo css:oStyle:cHeight := 300 // altura de 300 pixel:oStyle:cPadding := 0 // y sin margen interno// Barra azulWITH OBJECT WBevel():New( :WO ):cClrPane := "blue" // Color de fondo:aWidth[ xc_S ] := 4 // Anchura respecto al bevel que la contine de 4/12 ( o 1/3):oStyle:cHeight := "100%" // con una altura del 100% del bevel que la contiene:Create()END// Barra BlancaWITH OBJECT WBevel():New( :WO ):aWidth[ xc_S ] := 4:Create()END// Barra RojaWITH OBJECT WBevel():New( :WO ):cClrPane := "red":aWidth[ xc_S ] := 4:oStyle:cHeight := "100%":Create()END:Create()END WITH//------------------------------------------------------------------------------// BANDERA SUIZA//------------------------------------------------------------------------------WITH OBJECT WBevel():New( :WO ):cTitle := "BANDERA SUIZA":nStyle := xc_Row:cTitleAlign := xc_Center:oStyle:cMargin_top := 20 // Margen superior para separarla de la bandera anteriro:Create()END// Bevel contenedor de la banderaWITH OBJECT WBevel():New( :WO )//:oStyle:cPadding=0:aWidth[ xc_L ] := 6:aOffset[ xc_L ] := 3// :oStyle:cMargin_top := 20:lShadow := .T.:cClrPane := "red"// Banda superiorWITH OBJECT WBevel():New( :WO ):cClass := "suiza"// Al ocupar el 100% del espacio no hace falta indicar :aWidth:oStyle:cHeight := 100:cClrPane := "red":Create()END WITH// Parte superior de la cruzWITH OBJECT WBevel():New( :WO ) // Zona de color rojo:cClass := "suiza":aWidth[ xc_S ] := 5:cClrPane := "red":oStyle:cHeight := 100:Create()END WITHWITH OBJECT WBevel():New( :WO ) // Parte de la cruz:cClass := "suiza":aWidth[ xc_S ] := 2:cClrPane := "white":oStyle:cHeight := 100:Create()END WITHWITH OBJECT WBevel():New( :WO ) // Zona de color rojo:cClass := "suiza":aWidth[ xc_S ] := 5:cClrPane := "red":oStyle:cHeight := 100:Create()END WITH//Zona media de la cruzWITH OBJECT WBevel():New( :WO ) // Zona de color rojo:cClass := "suiza":aWidth[ xc_S ] := 3:cClrPane := "red":oStyle:cHeight := 100:Create()END WITHWITH OBJECT WBevel():New( :WO ) // Parte de la cruz:cClass := "suiza":aWidth[ xc_S ] := 6:oStyle:cHeight := 100:cClrPane := "white":Create()END WITHWITH OBJECT WBevel():New( :WO ) // Zona de color rojo:cClass := "suiza":aWidth[ xc_S ] := 3:cClrPane := "red":oStyle:cHeight := 100:Create()END WITH// Parte inferior de la cruzWITH OBJECT WBevel():New( :WO ) // Zona de color rojo:cClass := "suiza":aWidth[ xc_S ] := 5:cClrPane := "red":oStyle:cHeight := 100:Create()END WITHWITH OBJECT WBevel():New( :WO ) // Parte de la cruz:cClass := "suiza":aWidth[ xc_S ] := 2:oStyle:cHeight := 100:cClrPane := "white":Create()END WITHWITH OBJECT WBevel():New( :WO ) // Zona de color rojo:cClass := "suiza":aWidth[ xc_S ] := 5:cClrPane := "red":oStyle:cHeight := 100:Create()END WITH// Banda inferiorWITH OBJECT WBevel():New( :WO ):cClass := "suiza":oStyle:cHeight := 100:cClrPane := "red":Create()END WITH:Create()END WITH//------------------------------------------------------------------------------// BANDERA CORONA DE ARAGÓN//------------------------------------------------------------------------------WITH OBJECT WBevel():New( :WO ):cTitle := "BANDERA DE LA CORONA DE ARAGÓN":cTitleAlign := xc_Center:nStyle := xc_Row:oStyle:cMargin_top := 40:Create()END// Bevel contenedor de la banderaWITH OBJECT WBevel():New( :WO ):cClass := "bandera":aWidth[ xc_L ] := 6:aOffset[ xc_L ] := 3:nStyle := xc_Row:lShadow := .T.:oStyle:cPadding := 0:oStyle:cHeight := 300FOR n := 1 TO 9WITH OBJECT WBevel():New( :WO ):cClrPane := IF( n / 2 == Int( n / 2 ), "red", "yellow" ) // Si es par, en rojo, impar en amarillo:oStyle:cHeight := "11.11%":Create()ENDNEXT:Create()END//------------------------------------------------------------------------------// BANDERA DE JAPÓN//------------------------------------------------------------------------------WITH OBJECT WBevel():New( :WO ):cTitle := "BANDERA DE JAPÓN":cTitleAlign := xc_Center:nStyle := xc_Row:oStyle:cMargin_top := 20:Create()END// Bevel contenedor de la banderaWITH OBJECT WBevel():New( :WO ):cClass := "bandera":aWidth[ xc_L ] := 6:aOffset[ xc_L ] := 3:nStyle := xc_Row:lShadow := .T.:oStyle:cHeight := 300:lHcenter := .T. //Los elementos que contiene se alinearán al centro horizontalmente:lValing := .T. //Los elementos que contiene se alinearán al centro verticalmente//Punto rojo ( como su contenedor tiene lHcenter y lValing, nos saldrá en el centro de la banderaWITH OBJECT WBevel():New( :WO ):oStyle:cHeight := 140 // altura:oStyle:cWidth := 140 // anchura:oStyle:cMargin := 0 // Sin márgenes:oStyle:cBackground_color := "red !important" //Color:oStyle:cBorder_radius := "50%" // radio del 50% para hacer el bevel redondo:Create()END:Create()END//------------------------------------------------------------------------------// BANDERA MÉXICO//------------------------------------------------------------------------------WITH OBJECT WBevel():New( :WO ):cTitle := "BANDERA DE MÉXICO":cTitleAlign := xc_Center:nStyle := xc_Row:oStyle:cMargin_top := 20:Create()ENDWITH OBJECT WBevel():New( :WO ):cClass := "bandera":aWidth[ xc_L ] := 6:aOffset[ xc_L ] := 3:nStyle := xc_Row:lShadow := .T.:oStyle:cPadding := 0:oStyle:cHeight := 300WITH OBJECT WBevel():New( :WO ):aWidth[ xc_S ] := 4:cClrPane := "green":oStyle:cHeight := "100%":Create()ENDWITH OBJECT WBevel():New( :WO ):aWidth[ xc_S ] := 4:lHcenter := .T.:lValing := .T.:oStyle:cHeight := "100%"WITH OBJECT WImage():New( :WO ):cImage := "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Coat_of_arms_of_Mexico.svg/245px-Coat_of_arms_of_Mexico.svg.png":Create()END WITH:Create()ENDWITH OBJECT WBevel():New( :WO ):aWidth[ xc_S ] := 4:cClrPane := "red":oStyle:cHeight := "100%":Create()END:Create()END//------------------------------------------------------------------------------// BANDERA CHINA//------------------------------------------------------------------------------WITH OBJECT WBevel():New( :WO ):cTitle := "BANDERA DE CHINA":cTitleAlign := xc_Center:nStyle := xc_Row:oStyle:cMargin_top := 20:Create()ENDWITH OBJECT WBevel():New( :WO ):cClass := "bandera":aWidth[ xc_L ] := 6:aOffset[ xc_L ] := 3:nStyle := xc_Row:lShadow := .T.:oStyle:cPadding := 0:oStyle:cHeight := 300//Zona con las estrellasWITH OBJECT WBevel():New( :WO ):aWidth[ xc_S ] := 5:cClrPane := "red":oStyle:cHeight := "50%" // La mitad de la altura del contenedorWITH OBJECT WImage():New( :WO ):oStyle:cPadding := 6 // Un margen interno de 6 puntos:oStyle:cHeight := "100%" // una altura del 100% de su contenedor:oStyle:cWidth := "auto" // Anchura automática respecto a la altura:cImage := "https://www.clipartmax.com/png/full/226-2262107_open-china-flag-yellow-stars.png":Create()END WITH:Create()END// Banda superior sin estrellasWITH OBJECT WBevel():New( :WO ):aWidth[ xc_S ] := 7:cClrPane := "red":oStyle:cHeight := "50%":Create()END// Banda inferiorWITH OBJECT WBevel():New( :WO ):cClrPane := "red":oStyle:cHeight := "50%":Create()END:Create()END////------------------------------------------------------------------------------// IKURRIÑA//------------------------------------------------------------------------------WITH OBJECT WBevel():New( :WO ):cTitle := "IKURRIÑA":cTitleAlign := xc_Center:nStyle := xc_Row:oStyle:cMargin_top := 20:Create()ENDWITH OBJECT WBevel():New( :WO ):cClass := "bandera":aWidth[ xc_L ] := 6:aOffset[ xc_L ] := 3:nStyle := xc_Row:lShadow := .T.:oStyle:cPadding = 0:oStyle:cHeight = 300WITH OBJECT WBevel():New( :WO ) // Cuarto superior izquierdo:cClrPane := "red":oStyle:cHeight := "41.67%" // En lugar de usar materialize (:aWidth) usamos % directo:oStyle:cWidth := "46%":oStyle:cPadding := 0WITH OBJECT WImage():New( :WO ):cImage := "https://fractality.ddns.net:44444/images/cuartillo.png":oStyle:cHeight := "100%" // una altura del 100% de su contenedor:oStyle:cWidth := "100%" // Anchura automática respecto a la altura:Create()END WITH:Create()END WITHWITH OBJECT WBevel():New( :WO ) // aspa superior de la cruz:cClrPane := "white":oStyle:cHeight := "41.67%":oStyle:cWidth := "8%":Create()END WITHWITH OBJECT WBevel():New( :WO ) // cuarto superior derecho:cClrPane := "red":oStyle:cHeight := "41.67%":oStyle:cWidth := "46%":oStyle:cPadding := 0WITH OBJECT WImage():New( :WO ):cImage := "https://fractality.ddns.net:44444/images/cuartillo.png":oStyle:cHeight := "100%":oStyle:cWidth := "100%":oStyle:cTransform := "rotate(180deg)" // rotado:oStyle:cTransform := "scaleX(-1)" // y girado:Create()END WITH:Create()END WITHWITH OBJECT WBevel():New( :WO ) // parte central de la cruz:cClrPane := "white":oStyle:cHeight := "16.66%":Create()END WITHWITH OBJECT WBevel():New( :WO ) // Inferior Izquierda:cClrPane := "red":oStyle:cHeight := "41.67%":oStyle:cWidth := "46%":oStyle:cPadding := 0WITH OBJECT WImage():New( :WO ):cImage := "https://fractality.ddns.net:44444/images/cuartillo.png":oStyle:cHeight := "100%":oStyle:cWidth := "100%":oStyle:cTransform := "rotate(180deg)":oStyle:cTransform := "scaleX(-1)":Create()END WITH:Create()ENDWITH OBJECT WBevel():New( :WO ) // Aspa inferio de la cruz:cClrPane := "white":oStyle:cHeight := "41.67%":oStyle:cWidth := "8%":Create()END WITHWITH OBJECT WBevel():New( :WO ) // Inferior derecha:cClrPane := "red":oStyle:cHeight := "41.67%":oStyle:cWidth := "46%":oStyle:cPadding := 0WITH OBJECT WImage():New( :WO ):cImage := "https://fractality.ddns.net:44444/images/cuartillo.png":oStyle:cHeight := "100%" // una altura del 100% de su contenedor:oStyle:cWidth := "100%" // Anchura automática respecto a la altura:oStyle:cTransform := "rotate(180deg)":Create()END WITH:Create()END:Create()END//------------------------------------------------------------------------------// BANDERA CANARIA//------------------------------------------------------------------------------WITH OBJECT WBevel():New( :WO ):cTitle := "BANDERA DE CANARIAS":cTitleAlign := xc_Center:nStyle := xc_Row:oStyle:cMargin_top := 20:Create()ENDWITH OBJECT WBevel():New( :WO ):cClass := "bandera":aWidth[ xc_L ] := 6:aOffset[ xc_L ] := 3:nStyle := xc_Row:lShadow := .T.:oStyle:cPadding := 0:oStyle:cHeight := 300WITH OBJECT WBevel():New( :WO ):aWidth[ xc_S ] := 4:cClrPane := "white":oStyle:cHeight := "100%":Create()ENDWITH OBJECT WBevel():New( :WO ):aWidth[ xc_S ] := 4:oStyle:cBackground_color := "#1665a2 !important" // Para que prevalezca este color sobre lo indicado en el css:lHcenter := .T.:lValing := .T.:oStyle:cHeight := "100%"WITH OBJECT WImage():New( :WO ):cImage := "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Canary_Islands_CoA.svg/1024px-Canary_Islands_CoA.svg.png":Create()END WITH:Create()ENDWITH OBJECT WBevel():New( :WO ):aWidth[ xc_S ] := 4:oStyle:cBackground_color := "#f8c600 !important":oStyle:cHeight := "100%":Create()END:Create()END//------------------------------------------------------------------------------// MURCIA//------------------------------------------------------------------------------WITH OBJECT WBevel():New( :WO ):cTitle := "MURCIA":cTitleAlign := xc_Center:nStyle := xc_Row:oStyle:cMargin_top := 20:Create()ENDWITH OBJECT WBevel():New( :WO ):cClass := "bandera":aWidth[ xc_L ] := 6:aOffset[ xc_L ] := 3:nStyle := xc_Row:lShadow := .T.:cClrPane := "red":oStyle:cPadding := 0:oStyle:cHeight := 300WITH OBJECT WBevel():New( :WO ) // Creamos un bevel dentro del principal de 3/4 y 40% de altura para los castillos:cClrPane := "red":aWidth[ xc_S ] := 3:oStyle:cHeight := "40%":oStyle:cPadding := 0FOR n = 1 TO 4 // Ponemos los 4 castillosWITH OBJECT WBevel():New( :WO ) // Zona de color rojo:aWidth[ xc_S ] := 6 // la mitad de ancho cada uno:oStyle:cHeight := "50%" // Y la mitad de alto:cClrPane := "red":oStyle:cPadding := 0WITH OBJECT WImage():New( :WO ):cImage := "https://fractality.ddns.net:44444/images/castillo.png":oStyle:cHeight := "100%" // una altura del 100% de su contenedor:oStyle:cWidth := "100%" // Anchura automática respecto a la altura:oStyle:cMax_width := 86:oStyle:cMax_Height := 86:oStyle:cPadding := 10:Create()END WITH:Create()END WITHNEXT:Create()END WITHWITH OBJECT WBevel():New( :WO ) // Zona de color rojo:oStyle:cHeight := "40%":cClrPane := "red":aWidth[ xc_S ] := 9:Create()ENDWITH OBJECT WBevel():New( :WO ) // Zona de color rojo fila media:oStyle:cHeight = "27%":cClrPane = "red":aWidth[ xc_S ] := 12:Create()ENDWITH OBJECT WBevel():New( :WO ) // Zona de color rojo fila inferior:oStyle:cHeight := "33%":cClrPane := "red":aWidth[ xc_S ] := 8:Create()ENDWITH OBJECT WBevel():New( :WO ) // Zona inferior derecha de las coronas:oStyle:cHeight := "33%":cClrPane := "red":aWidth[ xc_S ] := 4:oStyle:cDisplay := "flex":oStyle:cAlign_items := "flex-end" // Para ajustar a la derechaWITH OBJECT WImage():New( :WO ):cImage := "https://fractality.ddns.net:44444/images/coronas.png":oStyle:cHeight := "100%" // una altura del 100% de su contenedor:oStyle:cWidth := "auto" // Anchura automática respecto a la altura:oStyle:cMargin_left := "auto":oStyle:cPadding := 10:Create()END WITH:Create()END:Create()ENDoCgi:SendPage( :Create() )END WPAGERETURN NIL -
-
Mostrando 1 respuesta al debate
- Debes estar registrado para responder a este debate.